Шаблон:Mermaid

{{Mermaid}} — шаблон, позволяющий внедрять в страницы визуализации, отрисованные программой Mermaid.

Визуализация описывается особым языком, похожим на Markdown.

Программа визуализации написана на языке JavaScript и выполняется на стороне сервера с помощью node.js и puppeteer. Таким образом, отображение визуализации не зависит от наличия JavaScript в браузере и даже от наличия самого браузера.

Параметры

1. или mermaid — описание визуализации. Все | должны быть заменены на {{!}}, }} на } }, = на {{=}} (вместо последнего можно использовать именованный параметр mermaid),

• ширина (необязательный) — ширина в пикселях,
• высота (необязательный) — высота в пикселях,
• тема (необязательный) — тема. Возможные значения: default (умолчание), neutral, forest, dark,
• фон (необязательный) — цвет. Возможные значения: #RRGGBB или название цвета CSS. Умолчание: white.

Примеры

Викитекст	Вывод
{{mermaid|sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! }}	%%{init: {'width':'800','height':'600','theme':'default','background':'white','look':'classic'}}%% sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
{{mermaid|theme=dark|background=transparent|classDiagram Class01 <{{!}}-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --{{!}}> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label}}	%%{init: {'width':'800','height':'600','theme':'dark','background':'transparent','look':'classic'}}%% classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
{{mermaid|theme=neutral|%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'tagLabelColor': '#ff0000', 'tagLabelBackground': '#00ff00', 'tagLabelBorder': '#0000ff' } } }%% gitGraph commit branch develop commit tag:"v1.0.0" commit checkout main commit type: HIGHLIGHT commit merge develop commit branch featureA commit }}	%%{init: {'width':'800','height':'600','theme':'neutral','background':'white','look':'classic'}}%% %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'tagLabelColor': '#ff0000', 'tagLabelBackground': '#00ff00', 'tagLabelBorder': '#0000ff' } } }%% gitGraph commit branch develop commit tag:"v1.0.0" commit checkout main commit type: HIGHLIGHT commit merge develop commit branch featureA commit

Требуемые настройки External Data

Для работы этого шаблоны требуется активировать преднастройку External Data mermaid и развернуть одноимённый контейнер в соответствии с инструкциями, приложенными к расширению.

Системные требования

• node.js,
• @mermaid-js/mermaid-cli,
• External Data.

Ссылки

• About Mermaid.