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