Use Mermaid to create diagrams using text and code written in a Markdown style Surround Mermaid expressions with a fenced block and specify as a language The result will be a diagram flowchart TD A Start > B Is it B Yes > C OK C > D Rethink D > B B No > E End In presentation mode rendered expressions will automatically scale to make use of the screen space Note Rendering is done by using Mermaid library mermaid ```mermaid flowchart TD A Start > B Is it B Yes > C OK C > D Rethink D > B B No > E End ```

Use include plugin to render a Mermaid diagram from a file classDiagram Animal <| Duck Animal <| Fish Animal <| Zebra Animal int age Animal String gender Animal isMammal Animal mate class Duck String beakColor swim quack class Fish int sizeInFeet canEat class Zebra bool is_wild run include mermaid mermaid class diagram mmd classDiagram Animal <| Duck Animal <| Fish Animal <| Zebra Animal int age Animal String gender Animal isMammal Animal mate class Duck String beakColor swim quack class Fish int sizeInFeet canEat class Zebra bool is_wild run

Use to use as much horizontal space as required and available or sequenceDiagram par Alice to Bob Alice >>Bob Go help John and Alice to John Alice >>John I want this done today par John to Charlie John >>Charlie Can we do this today and John to Diana John >>Diana Can you help us today and Alice to Carl Alice >>Carl I also want this done today end end wide true ```mermaid wide true sequenceDiagram par Alice to Bob Alice >>Bob Go help John and Alice to John Alice >>John I want this done today par John to Charlie John >>Charlie Can we do this today and John to Diana John >>Diana Can you help us today and Alice to Carl Alice >>Carl I also want this done today end end ``` include mermaid mermaid sequence diagram mmd wide true

Mermaid offers the possibility of displaying custom icons Registering an icon pack served by a web site to register the icon pack with the name Registering an icon pack included in your znai documentation project to register the icon pack with the name This assumes that the file is in a subdirectory of the directory containing the current page Worked example with AWS icons source rendered diagram architecture beta group api logos aws lambda API service db logos aws aurora Database in api service disk1 logos aws glacier Storage in api service disk2 logos aws s3 Storage in api service server logos aws ec2 Server in api db L < hosts R server disk1 T < mounts B server disk2 T < mounts B db how to create a file with just the icons you need from an open source icon pack Assuming that you are working on a host where curl and jq are available here is a way to do it architecture beta mermaid iconpacks name logos url https unpkg com @iconify json logos@1 icons json @iconify json logos@1 logos mermaid iconpacks name logos url mermaid demo_icons json mermaid demo_icons json logos icons json mermaid ```mermaid iconpacks name logos url mermaid demo_icons json architecture beta group api logos aws lambda API service db logos aws aurora Database in api service disk1 logos aws glacier Storage in api service disk2 logos aws s3 Storage in api service server logos aws ec2 Server in api db L < hosts R server disk1 T < mounts B server disk2 T < mounts B db ``` curl L O https unpkg com @iconify json logos@1 icons json jq prefix icons aws aurora icons aws aurora aws ec2 icons aws ec2 aws glacier icons aws glacier aws lambda icons aws lambda aws s3 icons aws s3 width height icons json > demo_icons json