Skip to content

Latest commit

 

History

History
458 lines (358 loc) · 6.11 KB

MermaidTutorial.md

File metadata and controls

458 lines (358 loc) · 6.11 KB
Raw
title description published date tags editor dateCreated
Markdown 画图：Mermaid 指北
给大家一点小小的 markdown 震撼（
true
2023-01-09 10:17:42 UTC
markdown
2023-01-09 10:16:18 UTC

Tutorials on Mermaid

基于 Mermaid 的官方文档。

只挑了典型的。

What is Mermaid?

Mermaid 允许您使用文本和代码创建图表和可视化。

它是一个基于 JavaScript 的图表和图表工具，可以呈现受 Markdown 启发的文本定义，以动态创建和修改图表。

简而言之就是在 Markdown 中插入图表的。

いきますよ！

Flowchart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
graph TD;
    A-->B;
    A-->C;
    B-->D; 
    C-->D;
Loading 
graph LR;
	A --> B;
	A --> C;
	B --> D;
	C --> D;
graph LR;
	A --> B;
	A --> C;
	B --> D;
	C --> D;
Loading

Flowchart 最常用，多来点 syntax。

Node

flowchart LR
    id
flowchart LR
    id
Loading
A node with text
flowchart LR
    id[This is the text in the box]
flowchart LR
    id[This is the text in the box]
Loading
A node with round edges
flowchart LR
    id1(This is the text in the box)
flowchart LR
    id1(This is the text in the box)
Loading
A stadium-shaped node
flowchart LR
    id1([This is the text in the box])
flowchart LR
    id1([This is the text in the box])
Loading
A node in a subroutine shape
flowchart LR
    id1[[This is the text in the box]]
flowchart LR
    id1[[This is the text in the box]]
Loading
A node in a cylindrical shape
flowchart LR
    id1[(Database)]
flowchart LR
    id1[(Database)]
Loading
A node in the form of a circle
flowchart LR
    id1((This is the text in the circle))
flowchart LR
    id1((This is the text in the circle))
Loading
A hexagon node
flowchart LR
    id1{{This is the text in the box}}
flowchart LR
    id1{{This is the text in the box}}
Loading
Special characters
flowchart LR
    id1["This is the (text) in the box"]
flowchart LR
    id1["This is the (text) in the box"]
Loading 
flowchart LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]
flowchart LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Loading

Links

Arrow head
flowchart LR
    A-->B
flowchart LR
    A-->B
Loading
Open link
flowchart LR
    A --- B
flowchart LR
    A --- B
Loading
Text on links
flowchart LR
    A-- This is the text! ---B
flowchart LR
    A---|This is the text|B

Both okay.

flowchart LR
    A-- This is the text! ---B
Loading
A link with arrow head and text
flowchart LR
    A-->|text|B
flowchart LR
    A-- text -->B

Both okay.

flowchart LR
    A-->|text|B
Loading
Dotted link
flowchart LR;
   A-.->B;
flowchart LR;
   A-.->B;
Loading
Dotted link with text
flowchart LR
   A-. text .-> B
flowchart LR
   A-. text .-> B
Loading
Chaining of links
flowchart LR
   A -- text --> B -- text2 --> C
flowchart LR
   A -- text --> B -- text2 --> C
Loading 
flowchart LR
   a --> b & c--> d
flowchart LR
   a --> b & c--> d
Loading 
flowchart TB
    A & B--> C & D
flowchart TB
    A & B--> C & D
Loading

我的评价是：语法糖差不多得了，老老实实拆开了写就行了。

If you describe the same diagram using the the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word lagom comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well.

New types of arrow
flowchart LR
    A --o B
    B --x C
flowchart LR
    A --o B
    B --x C
Loading

See also:

flowchart LR
    A o--o B
    B <--> C
    C x--x D
flowchart LR
    A o--o B
    B <--> C
    C x--x D
Loading

Flowchart orientation

flowchart BT
	A --> B;
flowchart BT
	A --> B;
Loading

等等。支持：

  • TB - top to bottom
  • TD - top-down/ same as top to bottom
  • BT - bottom to top
  • RL - right to left
  • LR - left to right

Subgraphs

Generally like:

subgraph title
    graph definition
end
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
Loading 
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
Loading

Gantt diagram

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
Loading