Mermaid Diagram

code for article pfeilbr/mermaid-diagram-playground

learn Mermaid, which lets you represent diagrams using text and code

Examples

Can view the following inline in vscode via vscode | Markdown Preview Mermaid Support with “Markdown: Open Preview to Side” command.

Or copy contents to mermaid file and use mermaid cli to generate file (svg, png or pdf).

# install deps
npm install

# uses mmdc installed as local package
npm run mmdc -- -i sample.mmd -o sample.pdf
npm run mmdc -- -i sample.mmd -o sample.png
npm run mmdc -- -i sample.mmd -o svg.png
npm run mmdc -- --help

graph LR;
    subgraph one
        apig(API Gateway)-->lambdaasync(lambda async)-->lambdasync(lambda sync)-->websocket(client web socket)
        webclient(web client)-->apig(API Gateway)
        events(Business Events)-->rtb
        rtb((Realtime Bus))-->Consumer
        rtb-->sfmc(Salesforce Marketing Cloud)
    end

graph TD;
    subgraph " "
        db[DB]
    end
     subgraph " "
        client(web client)-->API
     end

graph LR;
    Source-->API;
    AdminUI(Web Admin UI)-->API((API));
    WebWidget(Web Widget)-->API;
    API-->DB(DB)

Resources

Mermaid
mermaid-js/mermaid
mermaid-js/mermaid-cli - mermaid cli
vscode | Markdown Preview Mermaid Support