InterpreterMermaid

https://mermaid-js.github.io/mermaid/#/

Mermaid 문법으로 flowchart, sequence diagram, gantt, class diagram 등을 렌더링합니다.

다이어그램 종류는 Mermaid 코드의 첫 줄에서 정합니다.

Raw	Preview
[[[#!Mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ]]]	graph TD; A-->B; A-->C; B-->D; C-->D;

Raw	Preview
[[[#!Mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ]]]	sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Raw

Preview

[[[#!Mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
]]]

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Raw	Preview
[[[#!Mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ]]]	gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

Raw

Preview

[[[#!Mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
]]]

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

Raw	Preview
[[[#!Mermaid classDiagram Class01 <\|-- AveryLongClass : Cool Class03 -- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 -- C3 Class09 --\|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label ]]]	classDiagram Class01 <\|-- AveryLongClass : Cool Class03 -- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 -- C3 Class09 --\|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Raw

Preview

[[[#!Mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
]]]

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Raw	Preview
[[[#!Mermaid gitGraph commit commit branch develop commit commit commit checkout main commit commit ]]]	gitGraph commit commit branch develop commit commit commit checkout main commit commit

1. See Also

1.1. Backlinks

Interpreter

1.2. Similar Pages

Similar pages by cosine similarity. Words after page name are term frequency.

49.97% Aha00a:Mermaid john(16:16), mermaid(12:11), alice(6:12), diagram(8:5), you(4:8), sequence(3:7), size(2:8), how(4:4), preview(5:2), raw(5:2)

1.3. Adjacent Pages

Control

Focus depth ≤ 32

Min degree all

Label scale 1.0x

Node scale 1.0x

Link distance 80

Charge -120

Thumbnail ON

Start Stop More Fullscreen

Metrics

Nodes(visible/total)0/0

Links(visible/total)0/0

Avg degree0.00

Depth coverage0

Queue(fetch/graph)0 / 0

Zoom(scale)1.00x

Ctrl/⌘ + Scroll: Zoom

Root 1-hop 2-hop+

InterpreterMermaid

1. See Also

1.1. Backlinks

1.2. Similar Pages

1.3. Adjacent Pages

AhaWiki