Диаграммы (Mermaid)

Как это работает

Диаграммы Mermaid. Ограждение ```mermaid с блок-схемой (flowchart/graph, во всех четырёх направлениях), диаграммой последовательности (sequenceDiagram) или круговой диаграммой (pie) рисуется как диаграмма в режиме чтения, в экспортированном файле и в ответах Спросить заметки — откуда диаграммы чаще всего и приходят. Рисунок следует теме заметки (чернила, бумага и акцент), поэтому сочетается с текстом вокруг в обеих темах. В форматированном редактировании — режиме по умолчанию — диаграмма тоже рисуется, а сверху появляется панель блока (копировать, изменить, удалить). Изменить открывает внизу панель с исходником: пока она открыта, заметка заблокирована, а рисунок перерисовывается по мере набора; закрытие применяет изменение (ни сохранения, ни отмены здесь нет), Ctrl+Z отменяет всю правку одним шагом, а пустое поле удаляет блок. В режиме разделённого экрана щелчок по диаграмме переносит курсор к ограждению в исходном тексте. В текстовом редакторе всё остаётся текстом: нажмите Ctrl+E, чтобы увидеть диаграмму. Внутри элемента списка диаграмма — а также структура SMILES, блочная формула, [files] и ![[заметка]] — остаётся текстом в форматированном редактировании и рисуется в режиме чтения: там маркер элемента не смог бы вернуться в файл.

Подграфы (subgraph … end, включая вложенные) рисуются рамками с заголовком, а рёбра пересекают границу, выходя из настоящего узла; id подграфа тоже может быть концом ребра (sub --> X). Действуют цвета, объявленные автором: classDef, class, :::класс и style (заливка, обводка, толщина, штрих и цвет текста). Чтобы начать, используйте Вставить → Диаграмма (Mermaid) на панели заметки: подставится готовый каркас выбранного типа. В меню сразу лежат шесть самых используемых; Все диаграммы… открывает выбор из всех 33, сгруппированных по назначению, с поиском (по имени или по тому, что показывает диаграмма) и нарисованным предпросмотром каждой — это 33 рисунка, и увидеть рисунок быстрее, чем прочитать имя. Фронтматтер диаграммы — блок между --- перед первой строкой — тоже читается: title становится заголовком над рисунком (title в теле важнее), а ключи config, которые LightNote знает, доходят до диаграммы (gitGraph.mainBranchName, gantt.displayMode и ключи packet: bitsPerRow, bitOrder: descending — который зеркалит строку — и showBits: false); чего он не знает, то игнорируется и заметка не отклоняется.

Последовательность, сущности, классы и состояния

В диаграмме последовательности работают participant/actor (с as), формы стрелок (->>, -->>, -x, -)), активация (+/- и activate/deactivate), заметки (Note left of/right of/over), блоки loop/alt/else/opt/par и autonumber. То, что пока не рисуется — другие виды диаграмм — по-прежнему показывается как блок кода; direction внутри подграфа и linkStyle игнорируются. Синтаксис узла Mermaid v11 (A@{ shape: rounded, label: "текст" }) читается, и каталог фигур v11 рисуется: doc, lin-doc, docs, tag-rect, win-pane, hourglass, bolt, flag, das… — каждая является тем символом, который называет её имя, и ни одна не превращается в прямоугольник: прямоугольник вместо документа был бы другой диаграммой. Имя, которого у Mermaid нет, возвращает диаграмму в блок кода с указанием строки. Идентификатор ребра (A e1@--> B) и e1@{ animate: true } принимаются и игнорируются: анимация не рисуется. Типизированный участник (participant DB@{ "type": "database" }) рисует символ UML над дорожкой — boundary, control, entity, database, queue и collections —, а объявленный там "alias" работает как as.

erDiagram тоже рисуется: каждая сущность становится блоком с атрибутами, а кардинальность показывается на обоих концах связи (||--o{, }o--||, |o, |{); -- — идентифицирующая связь, .. — неидентифицирующая. Псевдоним p[Человек] задаёт имя блока, не меняя id, на который ссылаются связи. subgraph … end работает и здесь: сущности внутри получают рамку с заголовком, подграфы вложенные, а id рамки может быть концом связи (CLIENTE ||--o{ Vendas : faz) — тогда она приходит к границе, а не к сущности с таким именем.

classDiagram тоже: блок из трёх отсеков (имя, атрибуты и методы, разделяемые по скобкам метода), <<interface>> отдельной строкой, namespace в виде рамки и шесть видов связей (<|--, *--, o--, -->, ..>, ..|>). Внимание к направлению: в A <|-- B треугольник стоит у A — наследует B. Кардинальность в кавычках показывается на обоих концах ("1" --> "*"). Дженерики List~T~ показываются как List<T>, и в членах тоже. Лоллипоп-интерфейс (bar ()-- foo) рисует кружок сверху на той стороне, где стоит () — и только там —, а связь касается этого кружка; namespace тоже влагается, и после внутренней } класс возвращается во внешнее пространство имён.

stateDiagram-v2 рисует автомат состояний: [*] — начало (закрашенный круг) и конец (круг с кольцом), state X { … } становится рамкой, <<fork>>/<<join>> — полосой, а <<choice>> — ромбом. -- внутри составного состояния разделяет параллельные регионы, отмеченные пунктиром.

Хронология, путь, квадранты и Гант

timeline тоже рисуется: каждый период становится колонкой хронологии, а события складываются под ним; section объединяет эпохи в цветные полосы. Работают обе записи нескольких событий — двоеточия в одной строке (2004 : Facebook : Google) и продолжение на следующей (: другое событие), — и здесь любая строка, кроме title, section и direction, является свободным текстом. direction TD (вертикальная хронология) пока не рисуется и сохраняет блок кода.

journey (путь пользователя) тоже рисуется: каждая задача становится рамкой на оси пути, а оценка от 1 до 5 поднимает или опускает её лицо — именно ради профиля, который они образуют, эта диаграмма и существует. section объединяет этапы, а участники превращаются в цветные метки на задаче, с легендой слева. Грамматика здесь строгая (Задача: оценка: Участник, Участник), в отличие от timeline: без пары «имя/оценка» лицу негде разместиться, поэтому неверно записанная строка — или оценка вне диапазона 1–5 — отклоняет диаграмму с указанием строки.

А quadrantChart рисует плоскость из четырёх квадрантов: x-axis и y-axis называют концы каждой оси (правая часть --> необязательна), quadrant-1…quadrant-4 подписывают области, а каждая точка задаётся как Имя: [x, y], где x и y от 0 до 1. Осторожно с нумерацией: она из декартовой плоскости, а не из порядка чтения — quadrant-1 находится справа вверху, дальше против часовой стрелки; y = 1 — вверху. Цвет и радиус точки задаются напрямую (P: [0.5, 0.5] radius: 10, color: #109060) или классом (P:::класс и classDef), причём прямой стиль важнее класса. Координата вне диапазона 0…1 не обрезается, а отклоняет диаграмму с указанием строки — это положение на плоскости, и обрезка поместила бы точку в квадрант, которого вы не писали.

gantt рисует график работ: dateFormat задаёт формат дат, которые вы пишете (по умолчанию YYYY-MM-DD), а axisFormat — формат подписей оси (%d.%m); section объединяет задачи в полосы. Каждая задача записывается как Текст : метки, id, начало, конец — метки done, active, crit и milestone идут первыми и сочетаются между собой, начало — это дата или after другойId, а конец — дата, длительность (5d, 2w, 3h, 45m) либо until другойId. Если поле всего одно, задача начинается там, где закончилась предыдущая.

after может ссылаться на задачу, объявленную ниже в заметке; а вот id, которого нет нигде, — или круговая зависимость — отклоняет диаграмму с указанием строки, вместо того чтобы поставить полосу на сегодняшний день. excludes weekends (а также excludes monday или конкретная дата) сдвигает конец каждой задачи на исключённые дни и потому меняет длину полос; includes 2026-03-07 важнее выходных — так вы говорите, что в эту субботу работают. Веха (milestone) показывается ромбом, а todayMarker off убирает линию сегодняшнего дня. displayMode compact укладывает несколько задач в одну строку, и здесь задача делит строку только тогда, когда ничто из занятого ею не касается уже стоящего там — включая подпись. Маркер vert (Начало : vert, v1, 20:15, 0m) рисует момент вертикальной линией через всю диаграмму, не занимая ни одной строки, а его подпись выходит под ось. dateFormat X (или x) читает дату как время Unix в секундах (или миллисекундах), а на оси %s/%Q пишет её обратно. tickInterval, который Mermaid не знает (1decade), молча игнорируется, как и там, и ось возвращается к автоматической.

Интеллект-карта, требования, Git и C4

В mindmap иерархия берётся из отступа: уровень пункта — это колонка, с которой начинается его текст, без скобок и стрелок (табуляция считается до следующей позиции, кратной 4, как в редакторе). Первый пункт — корень; второй пункт в той же колонке был бы вторым корнем, и тогда диаграмма отклоняется с указанием строки. Каждый пункт может объявить форму: [квадрат], (скруглённый), ((круг)), {{шестиугольник}}, ))взрыв(( и )облако(; без ограничителя выходит скруглённый. ::icon(...) и :::класс распознаются и игнорируются (мы не поставляем шрифт значков, а класс ссылается на внешний CSS, которого здесь нет). Рисунок двусторонний — корень в центре, ветви распределены влево и вправо, — у каждой ветви свой цвет, который наследуют потомки, а веточка утончается с глубиной.

Это дерево, а не силовая симуляция, как в mermaid: в интеллект-карте иерархия и есть содержание, значит она должна читаться по положению; к тому же рисунок перерисовывается при смене темы, и раскладка, сходящаяся из случайных начальных точек, каждый раз перестраивала бы всю карту.

treeView (treeView-beta) рисует дерево папок проекта и принимает обе записи: отступ (то, что набирают) и сами символы команды tree (├──, │, └──) — именно они позволяют вставить вывод терминала прямо в заметку: там одного отступа мало, потому что │ и пробел занимают одну колонку, а продолжение ветки означает только первый. Косая в конце помечает папку (src/), имя с пробелами берётся в кавычки, ## текст вешает комментарий в конце строки, а :::highlight выделяет имя. icon(...) распознаётся и игнорируется, как ::icon() в интеллект-карте: наборы значков приходят из Iconify через JavaScript, и даже сам Mermaid по умолчанию их не рисует.

ishikawa (ishikawa-beta) рисует диаграмму «рыбий скелет» для анализа причин: первый пункт — ЭФФЕКТ (голова, справа), следующий уровень — категории (кости), а два внутренних — причины и подпричины. Уровней три; четвёртый отклоняет диаграмму с указанием строки — в Mermaid его нет. Кости чередуются сверху и снизу от хребта — именно это позволяет двум соседним категориям уместиться, не накладывая текст друг на друга, а порядок, в котором вы пишете причины, читается сверху вниз с обеих сторон.

venn (venn-beta) рисует пересекающиеся множества: set A["Желательно"] объявляет одно, union A,B["Реализуемо"] даёт имя общей области (объединение называется по множествам, которые оно пересекает), а text A1["React"] сразу под ними кладёт элемент внутрь этой области. Множеств может быть до трёх, четвёртое отклоняет диаграмму с указанием строки: четырьмя кругами нет расположения, дающего все области, а «почти правильный» рисунок скрыл бы объявленную вами область. :число после подписи (set A["Alpha"]:20) масштабирует круг — площадь следует за числом —, а не пересечения: Венн с пропорциональными пересечениями — другая диаграмма (Эйлера), требующая численной оптимизации. style A fill:#ff6b6b красит множество, а с запятой (style A,B color:#333) — объединение этих множеств.

cynefin (cynefin-beta) рисует рамку Сноудена для классификации решений: у пяти областей фиксированные имена — complex, complicated, chaotic, clear и confusion — и фиксированные места (четыре квадранта, в середине confusion); выбираете вы то, что попадёт внутрь. Каждый пункт — отдельной строкой и в кавычках, а complex --> complicated : "Паттерн найден" рисует переход между областями. Имя вне этих пяти отклоняет диаграмму с указанием строки и списком допустимых. Граница между clear и chaotic выходит волнистой: в модели это обрыв, и форма говорит об этом — здесь волна всегда одна и та же, чтобы заметка не меняла рисунок при каждом открытии.

swimlane (swimlane-beta) рисует процесс по дорожкам, по одной на ответственного: синтаксис — это синтаксис блок-схемы (те же фигуры, стрелки, подписи и classDef), а каждый subgraph перестаёт быть рамкой и становится дорожкой. Каждый узел должен лежать в одной из них — узел снаружи отклоняет диаграмму, потому что нечем сказать, чья это задача, — и дорожка внутри дорожки тоже отклоняется. При LR дорожки — строки, а поток идёт вправо; при TB это столбцы, а поток идёт вниз. Положение вдоль потока берётся из самого длинного пути до каждой задачи, а полоса — это полоса владельца: задача никогда не выходит из своей дорожки, даже если так рисунок вышел бы компактнее.

agentflow (agentflow-beta) рисует поток с ИИ-агентами и по сути является другим словарём блок-схемы: стрелки те же, flow id["Имя"] … end играет роль subgraph (и влагается), global … end хранит то, к чему обращаются все агенты, а connector id["Имя"] объявляет внешнюю систему. По-настоящему меняется форма, которая называет роль шага: @{ shape: input }, task, tool (вызов инструмента), decision, refdoc (справочный документ) и action (итоговое действие). Документ подключается через -.-, без стрелки: к нему обращаются, он не шаг потока. Ключи, описывающие агента словами (instruction, params, returns, connectorRef, protocol, endpoint), читаются и при рисовании игнорируются. Эти имена форм работают только здесь — в flowchart они отклоняются, потому что там их нет и у Mermaid.

usecase (usecase-beta) рисует диаграмму вариантов использования UML: то, что объявлено через actor, становится человечком, а всё остальное — вариантом использования и рисуется эллипсом — именно это различие диаграмма и показывает. Вариант пишется как Id("Подпись"), Id[Подпись], просто Id или просто текст в кавычках; systemBoundary "Имя" … end — граница системы, а note for X "текст" вешает заметку. Связи — умловские: --> ассоциация, --|> — обобщение (полый треугольник со стороны общего), а A ..> : include B — с целью после двоеточия — рисует пунктирное «include»; то же самое для extend. То, что описывает актёра, но не меняет рисунок (type, business, icon), читается и игнорируется, а <<Стереотип>> попадает в подпись. Узел json пока не рисуется и остаётся блоком кода: это многострочный блок с деревом данных, и там JSON остаётся читаемым как текст.

wardley (wardley-beta) рисует карту Уордли: плоскость, где вертикаль — это видимость для пользователя (сверху то, что он видит), а горизонталь — эволюция, от Genesis до Commodity.

Внимание к порядку пары: component Чай [0.63, 0.81] — это [видимость, эволюция]: первое число — вертикальная ось, и прочитанная наоборот карта всё равно рисуется и начинает говорить другую стратегию. anchor — пользователь сверху, A -> B связывает цепочку (имя может содержать пробелы, с кавычками или без), A +> B — поток (толще; +<> в обе стороны и +'текст'> с подписью), а evolve Чайник 0.62 рисует пунктирную стрелку туда, куда деталь должна прийти. Ещё работают evolution (меняет названия этапов), size, (build)/(buy)/(outsource)/(market), (inertia) (полоса сопротивления), label [dx, dy], pipeline X { … }, note, accelerator/deaccelerator и нумерованные annotation с легендой annotations.

eventmodeling рисует event modeling: шкалу времени в трёх дорожках — экран сверху, команда (и модель чтения) в середине, событие снизу. Каждая строка — это tf 02 cmd AddItem: число — момент (столбец), а среднее слово — тип, который выбирает дорожку: ui, cmd/command, pcr/processor, rmo/readmodel, view и evt/event (длинные формы равнозначны). Дорожка не объявляется: она и есть метод. rf (resetframe) открывает новый срез с пунктирным разделителем — там история начинается заново. Схема кадра идёт в фигурных скобках ({ description: string }) или по ссылке ([[Data]]) на блок data Data { … }, который может идти позже; а ->> 02 ->> 03 связывает кадр с моментами, которые его питают, по номеру.

railroad (railroad-ebnf-beta, -abnf-beta, -peg-beta или railroad-beta) рисует грамматику в виде железнодорожных путей: каждое правило становится путём, по которому можно провести пальцем — что можно написать, то и можно пройти. Правило — это имя = выражение ; (или имя <- … ; в PEG) и может занимать несколько строк: оно закрывается на ;. Текст в кавычках — терминал (капсула), а одиночное имя — другое правило (прямоугольник); | (или /) — выбор, ? — необязательность, + — один или больше, * — ноль или больше, а ( ), [ ] и { } группируют, делают необязательным и повторяют. ABNF ставит повтор перед (1*( ALPHA / "-" ), *DIGIT), PEG принимает предикаты !x и &x — они идут в подпись, потому что не потребляют ввод — а railroad-beta принимает функциональную запись (sequence(choice(terminal("+"), …))). Все четыре дают один рисунок: обход сверху — это необязательность, а петля снизу со стрелкой назад — повтор.

requirementDiagram рисует требования и элементы как блоки с разделами: объявленный вид (requirement, functionalRequirement, performanceRequirement, interfaceRequirement, physicalRequirement, designConstraint) выводится в кавычках-ёлочках над именем, а поля id, text, risk и verifymethod становятся строками — у element это type и docref. Отношения (satisfies, traces, derives, verifies, refines, copies, contains) пишут как a - satisfies -> b или зеркально b <- satisfies - a, и в зеркальной форме первое имя — это назначение. Сплошной линией идёт только contains, и символ стоит со стороны того, кто содержит; остальные пунктирные, со стрелкой у назначения. Имя с пробелом берут в кавычки.

gitGraph рисует историю репозитория: каждый commit сдвигает время вперёд, branch имя открывает новую дорожку и сразу переключает работу на неё (как git switch -c), checkout возвращает на другую, а merge сводит их вместе. Атрибуты пишут через двоеточие: commit id: "текст" tag: "v1" type: HIGHLIGHT (можно и REVERSE), а branch имя order: 2 меняет порядок дорожек; cherry-pick id: "…" требует id существующего коммита. Форма говорит о виде — залитый кружок у обычного коммита, квадрат у выделенного, круг с крестом у отменённого, двойное кольцо у слияния и разрезанный круг у cherry-pick, — потому что в теме, где два оттенка палитры похожи, различает их только форма. LR: (по умолчанию), TB: и BT: поворачивают ось времени. checkout/merge несуществующей ветки отклоняет диаграмму с указанием строки, вместо того чтобы создать дорожку, которую вы не просили.

Семейство C4 (C4Context, C4Container, C4Component, C4Dynamic и C4Deployment) тоже рисуется, и в нём всё — макрос: в синтаксисе нет ни одной стрелки. Каждый элемент становится блоком, где вид стоит в кавычках-ёлочках сверху, имя — полужирным, а описание — ниже: Person(alias, "Имя", "Описание"), System, Container, Component и варианты Db, Queue, _Ext. У Container и Component третий аргумент — это технология (Container(app, "App", "C++/Qt", "что он делает")), у остальных третий — уже описание. Границы (Boundary, Enterprise_Boundary, System_Boundary, Container_Boundary и Node из C4Deployment) открывают фигурную скобку и становятся блоком с заголовком, в том числе вложенным. Связь пишут как Rel(a, b, "подпись", "технология"); BiRel ставит стрелку с обеих сторон, а Rel_Back указывает назад. C4Dynamic нумерует связи в порядке появления. Подсказки положения (Rel_U, Rel_D, Rel_L, Rel_R) и Update…Style принимаются и игнорируются: расстановку задаёт та же раскладка, что и у остальных диаграмм, а цвет приходит из темы заметки. Связь с необъявленным псевдонимом отклоняет диаграмму с указанием строки, вместо того чтобы выдумать блок, которого вы не писали.

Доска, графики и пакет

В kanban отступ — это синтаксис, с двумя уровнями: внешний — дорожка, внутренний — карточка (id[Подпись] или просто текст). @{ ticket: LN-9, assigned: 'ana', priority: 'High' } после карточки не попадает в её текст: тикет и ответственный уходят в собственный нижний ряд, а приоритет (Very High, High, Low, Very Low) становится цветом полосы у левого края, по шкале от тёплого к холодному. Все дорожки заканчиваются на одной линии, и дорожка без карточек всё равно видна — именно она и показывает пустой столбец. Это нарисованная доска, чтобы объяснить поток внутри заметки; доска, на которой действительно работают, с перетаскиванием карточек, — это панель Задачи самого приложения.

xychart (xychart-beta) рисует столбцы и линии на двух осях: x-axis "Заголовок" [янв, фев, мар] задаёт категории — имя с пробелом или запятой берётся в кавычки, — y-axis "Заголовок" 0 --> 100 фиксирует шкалу, а каждая строка bar [10, 40, 90] или line [20, 30, 80] добавляет ряд: по одному значению на категорию, в том порядке, в каком категории объявлены. Ряд, в котором значений больше или меньше, приводит к отказу с указанием строки: столбцы съехали бы на другие категории, и график начал бы утверждать другое. Без y-axis шкала берётся из данных и начинается с нуля, пока они не уходят ниже, — начинать с наименьшего значения значит преувеличить разницу между столбцами, а этого никто не выбирал; при объявленном диапазоне значение за его пределами отклоняется, а не вылезает за поле.

x-axis принимает и непрерывный диапазон (0 --> 100), а без него категориями становятся номера. Два ряда столбцов рисуются рядом, а не друг поверх друга, как в mermaid: при наложении задний ряд исчезает. xychart-beta horizontal пока не рисуется и остаётся блоком кода, потому что нарисованный вертикально он был бы транспонированным. У ряда может быть имя (bar "Открытые" [10, 40], line "Закрытые" [20, 30]): имена собираются в легенду над полем, каждое в форме своего ряда — залитый столбик, линия с точкой —, потому что один цвет их не различает. А в линейном ряду значение может нести подпись ([540 "PaLM", 65]), которая рисуется над точкой; у столбиков подпись игнорируется, как и в Mermaid.

radar (radar-beta) рисует профиль одной или нескольких кривых по осям, расходящимся из центра: axis a["Подпись"], b, c объявляет оси — строку можно повторять, — а curve x["Имя"]{80, 60, 90} задаёт по одному значению на ось, в том порядке, в каком оси объявлены; именованная запись ({a: 80, c: 90, b: 60}) тоже работает. Обратите внимание на направление: первая ось смотрит вверх, а обход идёт по часовой стрелке. max и min задают шкалу — без max она берётся из наибольшего прочитанного значения, — и значение за её пределами не обрезается, а приводит к отказу с указанием строки; ticks меняет число колец, graticule circle делает их круглыми, а showLegend false убирает легенду. Кривая, у которой значений больше или меньше, чем осей, тоже отклоняется: это был бы не незаконченный рисунок, а другой рисунок.

packet (packet-beta) рисует карту битов пакета: каждое поле записывается как 0-15: "Подпись", и диапазон включает оба конца — 0-15 это шестнадцать битов. Один бит пишется как 4: "Подпись", а относительная форма +16: "Подпись" берёт следующие шестнадцать, чтобы не пересчитывать всё при вставке поля в середину. Поля должны идти подряд, без пропусков: разрыв или наложение приводят к отказу с указанием строки, потому что и то и другое молча сдвинуло бы всё последующее. В строке 32 бита, и поле, переходящее на следующую строку, рисуется на обеих, а подпись попадает в более широкую часть; числа над сеткой отмечают, где начинается каждое поле, плюс последний бит каждой строки.

Сетка, площади, архитектура, поток и ZenUML

block (block-beta) рисует сетку из прямоугольников, и положение в ней — это порядок, в котором вы их написали: columns 3 задаёт число столбцов (без него всё встаёт в один ряд), каждый прямоугольник принимает формы блок-схемы (a["Подпись"], b(("круг")), c{"ромб"}), a:2 заставляет его занять два столбца, а space (или space:2) оставляет пропуск. block:id … end вкладывает сетку в сетку, со своим columns, и снаружи получается рамка. Стрелки — те же, что в блок-схеме (a --> b, с подписью a -- "текст" --> b), но здесь они лишь ссылаются на уже объявленные блоки: стрелка к несуществующему имени приводит к отказу с указанием строки, а не к появлению прямоугольника в ячейке, которую вы не писали. Промежуток между столбцами растёт, пока не поместится подпись стрелки, чтобы она не касалась соседнего прямоугольника. Блочная стрелка (a<["Туда"]>(right)) — это рамка в форме стрелки: направления пишутся в скобках (right, left, up, down, либо x для обоих горизонтальных и y для обоих вертикальных) и сочетаются ((x, down)); выдуманное направление отклоняет диаграмму с указанием строки, а не превращается в какую-нибудь стрелку.

treemap (treemap-beta) рисует карту площадей: площадь каждого прямоугольника пропорциональна значению, а отступы задают вложенность любой глубины. Лист объявляет значение ("Имя": 12), а раздел не объявляет ничего — его значение это сумма детей, и собственный итог позволил бы прямоугольнику лгать о собственных частях, поэтому такое приводит к отказу с указанием строки. Имя с пробелом или двоеточием берётся в кавычки; classDef и :::класс задают цвет. Раскладка — squarified, она держит прямоугольники близкими к квадрату: резать всегда по одной оси значило бы получить полосы, которые не сравнить на глаз, а сравнение площадей — единственное, что делает этот тип. Подпись и значение появляются, только когда помещаются целиком внутри прямоугольника: обрезанные краем, они ничего не сообщили бы.

architecture (architecture-beta) рисует службы и связи между ними: service api(server)[API] объявляет компонент, group oblako(cloud)[Облако] открывает границу, суффикс in oblako помещает службу внутрь (группы вкладываются), а junction j создаёт угол, чтобы согнуть связь.

Положение задаёт сторона связи: a:R -- L:b прикладывает правую сторону a к левой стороне b, то есть ставит b справа от a; годятся L, R, T и B, а остриё появляется со стороны < или > (-->, <--> либо -- вовсе без острия). Суффикс {group} на конце отправляет линию к границе группы, а не к прямоугольнику внутри. Значки — те пять, что Mermaid несёт с собой: cloud, database, disk, internet и server. Любое другое имя приводит к отказу с указанием строки и перечнем существующих. Остальные (logos:aws-lambda и подобные) берутся из Iconify и появляются только там, где издатель страницы регистрирует пакет через JavaScript, чего не делает даже GitHub: принять их здесь значило бы отдать вам рисунок, который больше нигде не воспроизводится. align row a b c (или align column) ставит перечисленных участников в один ряд — или в один столбец —, а несуществующее имя отклоняет диаграмму с указанием строки, а не оставляет раскладку как было, не сказав почему.

sankey (sankey-beta) рисует диаграмму потоков, где толщина ленты — это значение: в теле нет ни одной стрелки — это CSV из трёх столбцов (источник,приёмник,значение), одна связь на строку, а сцепляет поток повторение одного и того же имени на обоих концах. Подпись с запятой берётся в кавычки, а кавычка внутри неё пишется удвоенной ("Расход ""постоянный"""); одна и та же пара источник/приёмник при повторении суммируется. Высота столбика узла равна большей из двух сумм — входящей и исходящей, чтобы исходящие ленты узла, который раздаёт больше, чем получает, не выходили за край. Столбцы берутся из самого длинного пути до каждого узла, а то, у чего нет выхода, уходит в последний столбец. Значение меньше или равное нулю, связь узла с самим собой и цикл отклоняют диаграмму с указанием строки — в цикле нет самого длинного пути, а обрезать связь ради рисунка значило бы показать поток, которого вы не писали. title здесь нет: тело — чистый CSV, и принять его означало бы хорошо нарисовать в LightNote и получить синтаксическую ошибку в Mermaid.

zenuml — другой синтаксис для того же рисунка — диаграммы последовательности, — записанный как код, а не стрелками. Синхронный вызов называет только адресата (Магазин.записать(товар)), а отправитель — это блок, который его окружает: внутри Магазин.записать() { Склад.резерв() } Склад вызывает Магазин. На внешнем уровне вызывающий — это инициатор: @Starter(Аня) даёт ему имя, а без него берётся User с человечком, и он появляется, только если какой-то вызов его требует. Асинхронное сообщение — это A->B: текст (открытый наконечник, никто не ждёт), а A->B.метод() — синхронный вызов с явно указанным отправителем. {} вкладывает, return x возвращается к тому, кто сделал охватывающий вызов (if посередине этого не меняет), x = A.m() — другая запись того же ответа, new A(args) создаёт, а // комментарий становится заметкой над следующим сообщением. Блоки — это if/else if/else, while/for/forEach/loop, opt, par и try/catch/finally; } else { продолжает ту же рамку разделителем, а не открывает новую. @Actor рисует человечка; остальные аннотаторы (@Database, @Boundary…) становятся стереотипом в подписи («Database» Склад), потому что их значки здесь не рисуются — имя остаётся видимым, а это главное. Имя с пробелом берётся в кавычки.

Обратите внимание, куда попадёт этот блок: в Mermaid zenuml — внешняя диаграмма, которую страница должна зарегистрировать через JavaScript; GitHub этого не делает, поэтому та же заметка, что рисуется здесь, там останется блоком кода.

А если LightNote не смог прочитать диаграмму, он сообщает почему и в какой строке, прямо под блоком — для типа, который мы ещё не рисуем, предупреждения нет: в написанном вами ошибки нет.