超全Mermaid流程图与甘特图个人笔记（英文书写，恐英文者慎入）

最新推荐文章于 2023-11-20 20:00:00 发布

Hurrilare

最新推荐文章于 2023-11-20 20:00:00 发布

阅读量1.1k

点赞数 1

文章标签： markdown 个人开发

本文链接：https://blog.csdn.net/ju_chang/article/details/121453840

版权

Mermaid

文章目录

Mermaid

Flowchart

Node

flowchart LR  %% LR:left to right,TB:top to bottom,RL,BT
	id[This is the text in the box]

Graph

flowchart TB
	Start --> Stop

Node shapes

flowchart TB
	id1[test1]	%%rectangle
	id2(test2)	%%round edges
	id3([test3])	%%stadium-shaped
	id4[[test4]]	%%subroutine shape
	id5[(test5)]	%%cylindrical
	id6((test6))	%%circle
	id7>test7]	%%asymmetric
	id8{test8}	%%rhombus
	id9{{test9}}	%%hexagon
	id10[/test10/]	%%parallelogram
	id11[\test11\]	%%parallelogram alt
	id12[/test12\]	%%trapezoid
	id13[\test13/]	%%trapezoid alt

Links between nodes

flowchart TD
	A1-->B1	%%arrow head
	A2---B2	%%open link
	A3_1--text---B3_1	%%text on links
	A3_2---|text|B3_2	%%text on links
	A4_1-->|text|B4_1	%%with arrow head and text
	A4_2--text-->B4_2	%%with arrow head and text
	A5-.->B5	%%dotted link
	A6-.text.->B6	%%dotted link with text
	A7==>B7	%%thick link
	A8==text==>B8	%%thick link wiht text

Chaining of links

flowchart TB
	A1--text-->B1--text-->C1	%%chaining of links
	A2-->B2 & C2-->D2	%%multiple nodes links
	A3 & B3-->C3 & D3
	A4-->C4
	A4-->D4
	B4-->C4
	B4-->D4

New arrow types

flowchart LR
	A--oB
	B--xc

Multi directional arrows

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

Length of a link

flowchart TD
	A --> B
	C ---->|text1| D	
	E -- text2 ----> F 
	linkStyle 2 stroke:#ff3,stroke-width:4px,color:green;
	style A fill:red,stroke:#ff3,height:10,width:10;
	%% for dotted or thick links, added dots or equal signs

Special characters that break syntax

flowchart LR
	id1["This is (#10004;) #10008;"]
	A["A double quote:#quot;"] -->B["A dec char:#9829;"]

Subgraths

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

flowchart TB	%%set edges to and from subgraphs
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

flowchart LR	%%direction in subgraphs(not work)--can use VS Code
  subgraph TOP
    direction TB
    subgraph B1
    	direction RL
        i1 -->f1
    end
    subgraph B2
    	direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

Interaction

flowchart LR;
    A-->B;
    B-->C;
    C-->D;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"
    click A call callback() "Tooltip for a callback"
    click B href "http://www.github.com" "This is a tooltip for a link"
    %% click nodeId callback
    %% click nodeId call callback()

flowchart LR;
    A-->B;
    B-->C;
    C-->D;
    D-->E;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
    click C href "http://www.github.com" _blank
    click D href "http://www.github.com" "Open this in a new tab" _blank

Styling and classes

styling links

linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
%% to style the fourth link

styling node

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    id1-->id3{judge}-->id2
    style id3 height:200,fill:red,width:10

Classes

classDef className fill:#f9f,stroke:#333,stroke-width:4px;	%%class defination
class nodeId1,nodeId2 className;	%%attach a class to a list of nodes

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

Basic support for fontawesome

fa:#icon class name#

flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro &amp#x1F619);	%%images

Gantt

gantt	%%use Typora better
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    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

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    %%functionality added                 :milestone

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h