Mermaidjs

Overview

Prerequisites

node.js
mermaidjs

Reference

Mermaidjs

https://mermaid.js.org/

Docs Getting Start

The set up for the following Tips

package.json

{
  "name": "diagram-mermaidjs",
  "version": "0.0.1",
  "author": "Your Name <email@example.com>",
  "description": "mermaid examples",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "dependencies": {
    "@mermaid-js/mermaid-cli": "^11.4.0"
  }
}

How to generate files

Write a markdown with a mermaid code block or a mermaid diagram file

Markdown: example.md

```mermaid
graph
    S(start)-->B{true?}
    B--Yes-->C[process]
    B--No-->D[exception]
    C-->E(end)
    D-->E
```

Mermaid diagram file: graph.mmd

graph
    S(start)-->B{true?}
    B--Yes-->C[process]
    B--No-->D[exception]
    C-->E(end)
    D-->E

Generate a image file

Generate a output file from Markdown

# svg
npx mmdc -i exmple.md -o example.svg  # example-1.svg is generated.
# png
npx mmdc -i exmple.md -o example.png  # example-1.svg is generated.

Generate a output file from a mermaid file

# svg
npx mmdc -i graph.mmd -o graph.svg
# png
npx mmdc -i graph.mmd -o graph.png

Embed generated image at somewhere

Tips

Flow

npx mmdc -i flow.md -o test-2.svg

sequence.mmd

%%{init: {'theme':'base'}}%%
flowchart LR

    po(Product Owner)

    subgraph Scrum
        direction LR

        subgraph Planning
            bk(Backlog Refinement)
            sp(Sprint Planning)
        end

        subgraph Sprint
            ds(Daily Scrum)
            dev(Development/Testing)
        end

        subgraph Closing
            sr(Sprint Review)
            rt(Retros pective)
            ic[Increment]
        end

    end

    pd(Product)

    po --> bk

    bk --> sp
    sp --> Sprint
    ds --> dev
    dev --> ds

    Sprint --> sr
    Sprint --> rt
    Sprint --> ic

    ic --> pd

test-2.svg

Sequence

npx mmdc -i sequence.md -o test-3.svg

sequence.mmd

%%{init: {'theme':'forest'}}%%
sequenceDiagram
    actor User
    participant ug as UserAgnt
    participant srv as REST Server
    participant db as Database

    User -->> ug: Click
    ug -->> srv: Reqest
    srv -->> db: Retrieve data
    db -->> srv: return records
    srv -->> ug: return Json payload

test-3.svg

Git

npx mmdc -i git.md -o test-4.svg

git.mmd

---
title: Example Git diagram
---
gitGraph
   commit tag: "prev version"
   commit
   branch develop
   commit
   checkout develop
   branch feature-branch
   checkout feature-branch
   commit
   commit
   checkout develop
   merge feature-branch
   checkout main
   merge develop
   commit tag: "latest version"

test-4.svg

Diagram Mermaidjs