You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Mermaid流程图:如何设置节点标签样式

嘿,很高兴你已经搞定了节点背景和边框的样式设置!关于Mermaid里节点标签的字体样式控制,其实很简单——你只需要在已有的style指令里追加CSS文本相关属性就行,下面给你逐个拆解常用的需求:

常用节点标签样式设置示例

1. 字体颜色

color属性指定,支持十六进制、RGB、颜色名称:

graph LR
s1[我的节点]
style s1 fill:#0000,stroke:#333,stroke-width:2px,color:#ff4444

2. 字体族

font-family设置,比如用系统自带字体或者自定义字体(注意环境支持):

graph LR
s1[我的节点]
style s1 fill:#0000,stroke:#333,stroke-width:2px,font-family:"Microsoft YaHei, sans-serif"

3. 字体加粗/倾斜

  • 加粗:font-weight:bold
  • 倾斜:font-style:italic
    组合示例:
graph LR
s1[我的节点]
style s1 fill:#0000,stroke:#333,stroke-width:2px,font-weight:bold,font-style:italic

4. 下划线/删除线

text-decoration属性,支持underline(下划线)、line-through(删除线),多个样式用空格分隔:

graph LR
s1[我的节点]
style s1 fill:#0000,stroke:#333,stroke-width:2px,text-decoration:underline line-through

多样式组合

把上面的属性混在一起,就能实现更个性化的标签样式:

graph LR
s1[自定义标签]
style s1 fill:#0000,stroke:#333,stroke-width:2px,color:#27ae60,font-family:"Courier New",font-weight:bold,text-decoration:underline

需要注意的是,Mermaid的style指令兼容大部分标准CSS文本属性,所以只要是合法的CSS文本样式属性,基本都能在这里生效。如果遇到某个属性不生效,可以检查下你使用的Mermaid版本是否为最新版哦。

内容的提问来源于stack exchange,提问作者user5961

火山引擎 最新活动