PlusMagi's Blog By Pitt Phunsanit WordPress PlusMagi Blocks: Mermaid Diagram Block

PlusMagi Blocks: Mermaid Diagram Block

Mermaid diagram types

Flowchart

flowchart LR
  Start --> Stop

Swimlanes Diagram

swimlane-beta LR
  subgraph Customer
    request[Request service]
  end
  subgraph Support
    triage[Triage request]
  end
  request --> triage

Sequence Diagram

sequenceDiagram
  Alice->>John: Hello John, how are you?
  John-->>Alice: Great!

Class Diagram

classDiagram
  class Animal
  Animal <|-- Duck

State Diagram

stateDiagram-v2
  [*] --> Still
  Still --> Moving
  Moving --> [*]

Entity Relationship Diagram

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains

User Journey Diagram

journey
  title My working day
  section Go to work
    Make tea: 5: Me
    Go upstairs: 3: Me

Gantt Diagram

gantt
  title A Gantt Diagram
  dateFormat YYYY-MM-DD
  section Section
    A task: a1, 2026-01-01, 30d
    Another task: after a1, 20d

Pie Chart

pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15

Quadrant Chart

quadrantChart
  title Reach and engagement
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 Expand
  Campaign A: [0.3, 0.6]

Requirement Diagram

requirementDiagram
  requirement test_req {
    id: 1
    text: the test text
    risk: high
    verifymethod: test
  }
  element test_entity {
    type: simulation
  }
  test_entity - satisfies -> test_req

GitGraph Diagram

gitGraph
  commit
  branch develop
  checkout develop
  commit
  checkout main
  merge develop

C4 Diagram

C4Context
  title System Context
  Person(user, "User")
  System(system, "System")
  Rel(user, system, "Uses")

Mindmap

mindmap
  Root
    Topic A
      Detail A
    Topic B

Timeline

timeline
  title History of Social Media
  2002 : LinkedIn
  2004 : Facebook
  2005 : YouTube

ZenUML

zenuml
  title Demo
  Alice->John: Hello John, how are you?
  John->Alice: Great!

Sankey Diagram

sankey
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,Industry,342.165
Electricity grid,Losses,56.691

XY Chart

xychart
  title "Sales Revenue"
  x-axis [jan, feb, mar, apr]
  y-axis "Revenue" 4000 --> 11000
  bar [5000, 6000, 7500, 8200]

Block Diagram

block
  columns 1
  a b c

Packet Diagram

packet
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"

Kanban Diagram

kanban
  Todo[Todo]
    task1[Create Documentation]
  Done[Done]
    task2[Ship Release]

Architecture Diagram

architecture-beta
  group api(cloud)[API]
  service db(database)[Database] in api
  service server(server)[Server] in api
  db:L -- R:server

Radar Chart

radar-beta
  title Grades
  axis m["Math"], s["Science"], e["English"]
  curve a["Alice"]{85, 90, 80}
  max 100

Event Modeling Diagram

eventmodeling
  tf 01 ui CartUI
  tf 02 cmd AddItem
  tf 03 evt ItemAdded

Treemap Diagram

treemap-beta
  "Category A"
    "Item A1": 10
    "Item A2": 20
  "Category B"
    "Item B1": 15

Venn Diagram

venn-beta
  title "Team overlap"
  set Frontend
  set Backend
  union Frontend,Backend["APIs"]

Ishikawa Diagram

ishikawa-beta
  Blurry Photo
  Process
    Out of focus
  User
    Shaky hands
  Equipment
    Dirty lens

Wardley Map

wardley-beta
  title Tea Shop Value Chain
  anchor Business [0.95, 0.63]
  component Cup of Tea [0.79, 0.61]
  component Tea [0.63, 0.81]
  Business -> Cup of Tea

Cynefin Framework

cynefin-beta
  title Incident Response
  complex
    "Investigate root cause"
  complicated
    "Analyze performance data"
  clear
    "Restart service"
  chaotic
    "Page on-call immediately"
  confusion
    "Unknown failure mode"

TreeView Diagram

treeView-beta
  my-project/
    src/
      index.js
    package.json