You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MermaidJS中设置流程图节点的特定尺寸?

在Mermaid流程图中设置节点特定尺寸

可以为Mermaid流程图的节点设置特定尺寸,但你之前使用的size属性并不是style指令的有效参数,这就是设置失效的原因。

要调整节点尺寸,需要在style指令中使用**width和height**属性,同时建议指定单位(如px)以确保在不同渲染环境下的效果一致。示例代码如下:

flowchart LR
    D[目标节点]
    style D fill:#fc6b03,width:100px,height:100px

如果需要针对特定形状的节点做更精细控制,也可以在节点定义时直接嵌入尺寸配置(仅部分节点类型支持这种写法),比如圆形节点:

flowchart LR
    D(("自定义尺寸圆形",width:120px,height:120px))
    style D fill:#fc6b03

注意:不同Mermaid版本或渲染工具对属性的支持可能略有差异,优先使用style指令搭配width/height的方式,兼容性会更好。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.10 17:42:05