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




