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 ```

A diagram that is too large to fit the page width is shrunk to fit and can become hard to read Click the diagram to open it in a full screen overlay where you can scroll to zoom towards the cursor drag to pan flowchart LR Client Web & Mobile Clients > Gateway API Gateway Gateway > Auth Auth Service Gateway > Catalog Catalog Service Gateway > Cart Cart Service Gateway > Orders Order Service Gateway > Payments Payment Service Gateway > Shipping Shipping Service Gateway > Notifications Notification Service Auth > AuthDb Auth DB Catalog > CatalogDb Catalog DB Catalog > Search Search Index Cart > CartCache Cart Cache Orders > OrdersDb Orders DB Orders > Queue Event Queue Payments > PaymentsDb Payments DB Payments > Gatewayp External Payment Gateway Shipping > ShippingDb Shipping DB Shipping > Carrier External Carrier API Queue > Notifications Queue > Analytics Analytics Pipeline Queue > Warehouse Data Warehouse Analytics > Warehouse Notifications > Email Email Provider Notifications > SMS SMS Provider Notifications > Push Push Provider Analytics > Dashboards BI Dashboards Warehouse > Dashboards click Catalog visuals graphviz diagrams click Payments href https mermaid js org Mermaid documentation wheel

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 mermaid statements to add links to diagram nodes Relative links will be resolved and validated against your documentation structure flowchart TD A Start > B Is it B Yes > C OK B No > D End click A introduction getting started click D href https mermaid js github io mermaid # Mermaid docs Note Relative links like are validated during build time the same way regular markdown links are validated click ```mermaid flowchart TD A Start > B Is it B Yes > C OK B No > D End click A visuals mermaid diagrams click D href https mermaid js github io mermaid # Mermaid docs ``` visuals mermaid diagrams

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