วัน: 5 สิงหาคม 2026

PlusMagi Blocks: Mermaid Diagram BlockPlusMagi Blocks: Mermaid Diagram Block

Mermaid diagram types

Flowchart

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

flowchart LR
  Start --> Stop

Swimlanes Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Sequence Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Class Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

classDiagram
  class Animal
  Animal <|-- Duck

State Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Entity Relationship Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

User Journey Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Gantt Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the 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

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Quadrant Chart

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the 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

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

gitGraph
  commit
  branch develop
  checkout develop
  commit
  checkout main
  merge develop

C4 Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Mindmap

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

mindmap
  Root
    Topic A
      Detail A
    Topic B

Timeline

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

ZenUML

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Sankey Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

XY Chart

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Block Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

block
  columns 1
  a b c

Packet Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Kanban Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Architecture Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the 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

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Event Modeling Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Treemap Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Venn Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Ishikawa Diagram

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

Wardley Map

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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

AMP page could not render Mermaid to SVG on this server. Open the non-AMP view to render the diagram.

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