obsidian中Mermaid语法

您所在的位置：网站首页 › 渲染制作流程图 › obsidian中Mermaid语法

obsidian中Mermaid语法

2024-07-12 13:21| 来源: 网络整理| 查看: 265

Mermaid 语法流程图 (Flowchart)

流程图由节点（几何形状）和边（箭头或线）组成。Mermaid 代码定义了如何创建节点和边，并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。

节点（默认）

代码：

flowchart LR id

也可以用 graph 代替 flowchart。

效果：

id 带有文本的节点

代码：

flowchart id[这是一段文本]

效果：

这是一段文本包含 Unicode 的文本

可以使用 “” 将包含 Unicode 的文本括起来。

代码：

flowchart id["这是 ❤ Unicode"]

效果：

这是 ❤ Unicode 方向

可在图表关键词后添加方向关键词来控制图表方向，流程图可用的方向关键词有以下几种：

TB (Top to bottom) : 从上到下TD (Top-down) : 同 TB，从上到下BT (Bottom to top) : 从下到上RL (Right to left) : 从右到左LR (Left to right) : 从左到右代码： flowchart TD 开始 --> 结束 flowchart LR 开始 --> 结束

效果：

开始结束开始结束节点形状

节点的默认形状为矩形，我们可以通过改变包裹文本的符号来改变节点的形状。

圆角矩形节点 flowchart LR id1(这是一段文本)

效果：

这是一段文本胶囊形节点 flowchart LR id1([这是一段文本])

效果：

这是一段文本卷轴形节点 flowchart LR id1[[这是一段文本]]

效果：

这是一段文本圆柱形节点 flowchart LR id1[(这是一段文本)]

效果：

这是一段文本圆形节点 flowchart LR id1((这是一段文本))

效果：

这是一段文本旗帜形节点 flowchart LR id1>这是一段文本]

效果：

这是一段文本

试试看，反过来写会怎样？

菱形节点 flowchart LR id1{这是一段文本}

效果：

这是一段文本六角形节点 flowchart LR id1{{这是一段文本}}

效果：

这是一段文本平行四边形节点 flowchart LR id1[/这是一段文本/]

效果：

这是一段文本梯形节点 flowchart LR id1[/这是一段文本\] flowchart LR id1[\这是一段文本/]

效果：

这是一段文本这是一段文本双圆节点 flowchart LR id1(((这是一段文本)))

效果：

flowchart LR id1(((这是一段文本))) 节点之间的连接

节点之间可用箭头或者线连接，箭头或线的类型可通过关键词来指定。可以有不同类型的链接或将文本字符串附加到链接上。

箭头链接 flowchart LR A-->B

效果：

A B 线链接 flowchart LR A---B

效果：

A B 带有文本的线链接 flowchart LR A-- 这是一段文本 ---B

或者

flowchart LR A---|这是一段文本|B

效果：

这是一段文本 A B 这是一段文本 A B 带有文本的箭头链接 flowchart LR A-- 这是一段文本 -->B

或者

flowchart LR A-->|这是一段文本|B

效果：

这是一段文本 A B 这是一段文本 A B 虚线箭头链接 flowchart LR A-.->B

效果：

A B 带有文本的虚线箭头链接 flowchart LR A-. 文本 .-> B

效果：

文本 A B 粗线箭头链接 flowchart LR A ==> B

效果：

A B 带有文本的粗线箭头链接 flowchart LR A == 文本 ==> B

效果：

文本 A B 隐形链接

在某些情况下，当您希望更改节点的默认位置时，这可能是一个有用的工具。

flowchart LR A ~~~ B

效果：

flowchart LR A ~~~ B 链式链接

可以在一行声明多个链接：

flowchart LR A -- 文本1 --> B -- 文本2 --> C

效果：

文本1 文本2 A B C

也可以在一行声明多个节点链接：

flowchart LR a --> b & c--> d

效果：

a b c d

然后，我们可以以一种非常富有表现力的方式描述依赖关系，只用下面一行：

flowchart TB A & B--> C & D

效果：

A B C D

使用基础的代码来描述这样的关系至少需要 4 行代码：

flowchart TB A --> C A --> D B --> C B --> D

一行的写法虽然简洁，但会使得代码难以阅读，所以建议不要过度使用这样的写法。

新的箭头类型

除了一般的箭头外，Mermaid 还支持以下 2 种箭头类型：

flowchart LR A --o B B --x C A B C 双向箭头

箭头可以是双向的：

flowchart LR A o--o B B C C x--x D A B C D 链接长度

流程图中的节点会被分到不同层级，链接的长度通常基于它跨越的层级，链接可以跨越任意数量的层级。除此之外，你也可以通过增加破折号 - 的数量来加长一个链接。

flowchart LR A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End] Yes No Start Is it? OK Rethink End

链接的长度可能超过总的层级数

当链接标签写在链接中间时，必须在链接的右侧添加额外的破折号 -。

flowchart LR A[Start] --> B{Is it?} B -- Yes --> C[OK] C --> D[Rethink] D --> B B -- No ----> E[End] Yes No Start Is it? OK Rethink End

对于虚线或粗线，需要添加的是等号 = 或点号 .，如下表所示：

长度123正常线—---------正常线带箭头–>—>---->粗线============粗线带箭头==>===>====>虚线-.--…--…-虚线带箭头-.->-…->-…-> 破坏语法的特殊字符

为了呈现更多可能的字符，我们可以将文本放在引号 “” 内：

flowchart LR id1["这是一段(文本)"] 这是一段(文本) 转义字符的实体代码

可以使用字符的实体代码来表示一个字符：

flowchart LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] A double quote:" A dec char:♥ 子图

语法如下：

subgraph title graph definition end

例：

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

我们也可以为子图设置显式 ID：

flowchart TB c1-->a2 subgraph ide1 [one] a1-->a2 end one a2 a1 c1 跨越子图的链接

可以为流程图添加跨越子图的链接：

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 three one c2 c1 two b2 b1 a2 a1 子图的方向

子图的方向可以通过添加 direction 和方向关键词来指定：

flowchart LR subgraph TOP direction TB subgraph B1 direction RL i1 -->f1 end subgraph B2 direction BT i2 -->f2 end end A --> TOP --> B B1 --> B2 TOP B1 f1 i1 B2 f2 i2 A B 交互

我们可以为节点绑定 JavaScript 函数或是 URL 链接，当用户点击节点时，会触发绑定的函数或是打开链接。

const callback = function () { alert('A callback was triggered'); }; obsidian中无法绑定javascript函数 ```mermaid flowchart LR A-->B B-->C C-->D click A callback "Tooltip for a callback" click B "https://www.github.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "https://www.github.com" "This is a tooltip for a link" ``` const callback = function () { alert('A callback was triggered'); }; A B C D 注释

使用%% 可为 Mermaid 代码添加注释，注释不会被渲染。

flowchart LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C text text2 A B C 样式和类

Mermaid 中的节点和链接都可以自定义样式：

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 Start Stop

还可以构造类来为一类节点或链接添加样式：

flowchart LR A:::someclass --> B --> C:::someclass classDef someclass fill:#f96 A B C 对 fontawesome 的基本支持

当环境中引入了 fontawesome 时，Mermaid 也能很好地支持这些图标：

flowchart TD B["fab:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) for peace forbidden A perhaps? 空格和分号

分号在早期版本中用于标记图形声明的结束，现在不使用分号也可以渲染，当然如果你加入了分号，也不会影响图表渲染。在顶点和链接之间只允许有一个空格。但是，顶点和它的文本之间以及链接和它的文本之间不应该有任何空格。不加入空格也可以正常渲染，加入的空格是为了更好的可读性。

flowchart LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] Link text One Two Hard edge Round edge Decision Result one Result two

【本文地址】

obsidian中Mermaid语法

obsidian中Mermaid语法

今日新闻

推荐新闻