Draw digram using Mermaid-John Liu Blog

Mermaid lets you create diagrams using text and code. In Visual Studio Code, after install the Mermaid Editor extension, you will be able to create diagram easily. The file name needs to have .mmd file extension.

Following code will generate an example digram:

flowchart TB;
title[<font size=6><B><u>Integration Automation Architecture</u></B>]
title --> A2
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;

    subgraph SG1[Power Automate Flow<br>]
        A1(Outlook email received) --> B(Retrieve automation config from DS5Admin DB)
        A2(Scheduled API call) --> B
        A3(File created in folder) --> B
        B --> B1(Load raw contents into DS5Admin DB based on config)
    end

    subgraph SG2[Data Process via SQL Agent job<br><br>]
        B1 --> B2(Process raw contents against target DB<br> from within Admin DB)
        B2 --> C{Automation type}
        C -- AAL --> D1(AAL SP)
        C -- pXRF --> D2(pXRF SP)
        C -- LAS --> D3(LAS SP)
        C -- JSON --> D4(JSON SP)
        C -- General CSV --> D5(CSV SP)
        C -. ... .-> D6(...)
    end

    subgraph SG3[Power Automate Flow<br><br>]
        D1 --> E(Notification send to relevant parties based on process result and config)
        D2 --> E
        D3 --> E
        D4 --> E
        D5 --> E
        D6 -.-> E
    end

    %%define colours
     classDef green fill:#9f6,stroke:#333,stroke-width:2px
     classDef orange fill:#f96,stroke:#333,stroke-width:4px
     classDef azure fill:#007fff,stroke:#333,stroke-width:4px
     classDef lightazure fill:#00aaff,stroke:#333,stroke-width:4px
     classDef lightblue fill:#add8e6,stroke:#333,stroke-width:4px
     
     %%apply background colour for selected nodes or subgraph
     class B2,E green
     class A1,A2,A3 orange
     %%class SG2 lightblue
     class SG1,SG3 lightazure

Result diagram: Diagram

Mermaid doesn’t have inbuilt function to save/print the diagram generated. To be able to print the diagram to svg/png/pdf file, we need to install Mermaid CLI.

To be able to install the Mermaid CLI, we need to have Node.js installed, which installs NPM required. There might be other ways to install NPM.

To generate the file, open cmd terminal and run this:

MMDC -i "C:\temp\digram file.mmd" -o test.png

References:

Mermaid offical doc
Mermaid cheatsheet
Mermaid CLI
Solving NPM not recognized error

FEATURED TAGS

ai api automation availability availability sets availability zones aws vm azure azure automation runbook azure blob azure cosmos db azure data lake azure function app azure openai azure sign-in azure site recovery azure sql database azure sql db azure subscription azure vm base64 certificate change data capture change tracking chrome clr container cte data api builder data conversion data gateway database role database size date table dax db config derived table diagram direct query disk management disk space docker downtime dtc dynamic m parameter embedding encrypted connection excel excel online execution plan extended events external data fabric fabric capacity failover cluster fk geometry hierarchy httpwebrequest hugo hyper-v incognito mode index infrastructure inline tvf json kql lakehouse linked server live query statistics locking m machine learning machine learning model machine learning services master key mcp mdx memory memory grant mermaid mirrored sql server network network card network category onedrive onnx runtime openrowset p2v parquet performance polybase power automate power bi power bi report tricks power platform power query powershell printer public ip address pyspark python qgis qt designer query performance query plan query troubleshooting r regex replication route s3 schema design scripting self-signed certificate server role sharepoint snowflake software development sofware development spark sql sql agent sql availability group sql error sql failover cluster instance sql index sql openjson sql permission sql recovery sql script sql security sql server sql server admin sql server config sql statistics ssis ssisdb ssl ssl/tls error ssms table expression tempdb tips troubleshooting unicode view visual studio visual studio code vmware wait statistics wi-fi connection issue windows settings