在Typora里使用mermaid画图

发表于 更新于 分类于 ， ， 阅读次数： Waline： 本文字数： 3.7k 阅读时长 ≈ 3 分钟

 这个主要是帮助我在Typora里画图。使用mermaid是因为Typora默认集成了。如果想要在Typora画比较好的流程图可以使用flowchat，比较专业的文档可以通过Typora的文档里去翻找。

 注：这个里面一些特殊的不适用于Typora。由于涉及到代码块，背景可能不是白的，可以在css相关文件添加 .mermaid{background:#FFF}，要注意优先级。在hexo-next里用的话，不用太低版本的js，否则一些不显示，大部分教程都是“7.1.2”，我改成了“8.8.0”。推荐这里查CDN

mermaid之graph

初始操作

1
2
3
4
​~~~mermaid
graph 方向;
代码
由于相关特性以及不想改文件，把此处的‘~’换成‘`’

~换`

方向

  • TB-从上到下
  • TD-自顶向下/从上至下相同
  • BT-从下到上
  • RL-从右到左
  • LR-从左到右

id[结点]形状

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
graph TD
id0
id[矩形]
id1(圆角)
id2([操场体育场形])
id4[[羽毛球场形]]
%% 我Tyopa圆柱是黑的
id5[(圆柱)]
id3((园))
id6>丝带形]
id7{菱形}
id8{{六角}}
id9[/平行四边形/]
id10[\平行四边形\]
id11[/上梯形\]
id12[\下梯形/]
%%不像正方形
id13[[正方形]]
%%不支持
id14[{棱柱体}]
id15({圆弧})
id16{(圆弧)}
graph TD;
    id0
id[矩形]
id1(圆角)
id2([操场体育场形])
id4[[羽毛球场形]]
%% 我Tyopa圆柱是黑的
id5[(圆柱)]
id3((园))
id6>丝带形]
id7{菱形}
id8
id9[/平行四边形/]
id10[\平行四边形\]
id11[/上梯形\]
id12[\下梯形/]
id13[[正方形]]

连线

实线---

graph LR;
A---B

实线箭头-->

graph LR;
A-->B

虚线-.-

graph LR;
A-.-B

虚线箭头-.->

graph LR;
A-.->B

粗线===

graph LR;
A===B

粗线箭头==>

graph LR;
A==>B

线上文字

--文字---、--文字-->、---|文字|、-->|文字|

graph LR;
A --连--- B --连--> C ---|连| D -->|连| E

-.文字.-、-.文字.->、-.-|文字|、-.->|文字|

graph LR;
A-.连.-B-.连.->C-.-|连|D-.->|连|E

==文字===、==文字==>、同理

graph LR;
A==连===B==连==>C

子图

graph TB
    c1-->a2
    %% 如图可以改显示的东西
    subgraph one [1]
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
1
2
3
4
5
6
7
8
9
10
11
12
graph TB
    c1-->a2
    %% 如图可以改显示的东西--专有id
    subgraph one [1]
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

flowchart

如果把graph换成flowchart，则有其他的连接和子图之间的连接

1
2
3
4
5
6
7
flowchart TD;
a--ob
b--xa
c o--o b
b <--> c
c x--x e
a --> e
flowchart TD;
a--ob
b--xa
c o--o b
b <--> c
c x--x e
a --> e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

样式和类

线的样式linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;会应用于第4个连接。

graph LR;
A-->B
linkStyle 0 stroke:#ff3,stroke-width:4px,color:red;

节点的样式style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5。

graph 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

类定义classDef className fill:#f9f,stroke:#333,stroke-width:4px;。

类附加class nodeId1,nodeId2 className;。

附加还可以用:::来。

1
2
3
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;

默认类classDef default fill:#f9f,stroke:#333,stroke-width:4px;，它将被分配给所有没有特定类定义的节点。

外部预定义的CSS类在Typora不起作用，但变成网页应该可以。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>
------------------
graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
    class A cssClass;
graph LR;
    A-->B[AAABBB];
    B-->D;
    class A cssClass;

需要学好多css的感觉。

转义

graph LR
id1["(233)"]
id2["#quot;"]-->id3["#9829;"]
1
2
3
graph LR
id1["(233)"]
id2["#quot;"]-->id3["#9829;"]

需要查找关于html的转义。

click

在Tyopa中不起作用，还不显示，要变成网页

graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link" _blank
1
2
3
4
5
6
7
8
9
10
<script>
  var callback = function(){
      alert('A callback was triggered');
  }
</script>
----------------
graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"

默认情况下，链接在同一浏览器选项卡/窗口中打开。它可以通过添加链接目标的点击定义来改变这种（_self，_blank，_parent和_top支持）：

1
2
3
4
5
graph LR;
    A-->B;
    B-->C;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
graph LR;
    A-->B;
    B-->C;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank

其他

1
2
graph TB
    A & B--> C & D
graph TB
    A & B--> C & D

注释。

1
2
3
graph TB
    A & B--> C & D
    %% 如此使用真方便

关于空格和分号，尽量标准吧。

关于icon，Typora不会显示，在博客里用可能会需要引入一些东西。不过一般应该都引入了。

1
C-->|3|F["fa:fa-car Car"]
graph LR;
C-->|3|F["fa:fa-car Car"]

其他图

以后再整理，暂时用不上。