Як написати блок-схему Mermaid:напрямок, вузли та стрілки.

Напрямок

Перший рядок називає тип діаграми й напрямок. Працюють і flowchart, і старіше graph.

• TD або TB: згори вниз
• BT: знизу вгору
• LR: зліва направо
• RL: справа наліво

Обирайте LR для короткого процесу, що вміщується в ширину сторінки, і TD для довшого.

Форми вузлів

Вузол — це ідентифікатор, після якого в дужках за бажання йде текст. Форму обирають дужки:

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

Вузол без дужок просто показує свій ідентифікатор. Пізніше на вузол можна послатися лише за ідентифікатором, тому форма й текст пишуться один раз.

Зв'язки та підписи

Зв'язки з'єднують два вузли. Вигляд стрілки показує вид з'єднання:

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• --> стрілка, --- лінія без наконечника
• -.-> пунктирна стрілка, ==> товста
• -->|label| або -- label --> ставить текст на зв'язок
• A --> B & C зв'язує один вузол із кількома, а A --> B --> C будує ланцюжок зв'язків

Додайте дефісів, щоб зв'язок став довшим, наприклад ---->, якщо вузлу потрібно більше місця.

Підграфи

Підграф групує вузли в блок із підписом. Він починається зі слова subgraph і закінчується словом end:

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

Слово в дужках — це назва, а слово перед ним — ідентифікатор, на який можна посилатися. Усередині підграфа може бути свій рядок direction LR, але напрямок ігнорується, якщо вузол усередині пов'язаний із чимось ззовні.

Повний приклад

Зберімо все разом: невеликий процес випуску релізу з рішенням, поверненням назад і згрупованим кроком:

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

Читайте згори: форма «стадіон» позначає початок, ромби — запитання, стрілки з підписами — відповіді, а рамка навколо двох вузлів — рев'ю. Якщо називати кожне рішення запитанням, а кожну стрілку його відповіддю, блок-схема читається без пояснень.

Коментарі та стилі

Рядок, що починається з %%, — коментар, і він не малюється. Щоб розфарбувати вузли, визначте клас і застосуйте його:

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

Не захоплюйтеся оформленням. Більшість блок-схем читається краще з меншою кількістю кольорів, а стилі можуть виглядати по-різному у світлій і темній темах.

Часті помилки

• Слово end малими літерами як текст вузла ламає діаграму. Пишіть End або візьміть текст у лапки.
• Ідентифікатор вузла, що починається з o або x одразу після зв'язку, наприклад A---oB, читається як зв'язок із кружечком чи хрестиком. Додайте пробіл або напишіть з великої.
• Спецсимволи в підписі. Дужки, круглі дужки й двокрапки треба брати в подвійні лапки: A["Save (draft)"].
• Немає першого рядка. Без flowchart TD нічого не намалюється.
• Забагато вузлів. Блок-схему з тридцяти прямокутників важко читати. Розділіть її або використайте підграфи.

Якщо діаграма не вийшла, Mermaid показує повідомлення про помилку, а текст лишається у вашому файлі, щоб його виправити.

Як це намалювати

Блоки Mermaid у Markdown-файлах малює GitHub і DotMD: офлайн, у світлій чи темній темі під колір сторінки. У редакторі команда Insert → Diagram вставляє в документ робочу блок-схему, а попередній перегляд перемальовується в міру набору. У тому самому посібнику розказано про діаграми послідовності, класів, станів, ER і Ганта. Сам синтаксис огородження описано в статті блоки коду в Markdown.

Питання про блок-схеми Mermaid

Інші запитання