Mermaid画图——添加样式

我发现，样式仅适用于两种图：普通图（graph）和流程图（flowchart）。

为连线添加样式

graph LR
a-->b
linkStyle 0 stroke:#ff3,stroke-width:4px;

graph LR
a-->b
linkStyle 0 stroke:#ff3,stroke-width:4px;

语法：

linkStyle order_no[, order_no] style_key_value_pairs

order-no是在图中出现的连线的顺序号，从0开始计数。

稍复杂一点的例子：

graph LR
a-->b
b-->c
b-->d
linkStyle 0 stroke-width:5px;
linkStyle 1 stroke:#0f0,stroke-width:2px;
linkStyle 2 stroke:#ff3,stroke-width:2px;

graph LR
a-->b
b-->c
b-->d
linkStyle 0 stroke-width:5px;
linkStyle 1 stroke:#0f0,stroke-width:2px;
linkStyle 2 stroke:#ff3,stroke-width:2px;

如果顺序号不对，则构成语法错误。

graph LR
a-->b
b-->c
b-->d
linkStyle 4 stroke-width:5px;

graph LR
a-->b
b-->c
b-->d
linkStyle 4 stroke-width:5px;

所以顺序号得数对！

如果连线很多，数顺序号就比较麻烦。如果后期调整了连线的位置，或对连线做了增减，则还很大可能涉及到顺序号重新计算，简直就是个灾难！

默认样式

graph LR
a-->b
b-->c
b-->d
linkStyle default stroke:#0f0,stroke-width:2px;

graph LR
a-->b
b-->c
b-->d
linkStyle default stroke:#0f0,stroke-width:2px;

好像渲染出来的效果不太对。

可设置的样式清单

暂未找到相关资料。如你恰好掌握相关秘密，请告诉我。

为节点添加样式

简单添加样式

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

添加样式类

graph LR
    A-->B

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

    %% 应用样式类
    class A className

graph LR
    A-->B

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

    %% 应用样式类，markdown里没效果
    class A className

可设置的样式清单

暂未找到相关资料。如你恰好掌握相关秘密，请告诉我。