Mermaid 3D 可视化：一键将 Mermaid 图转换为真三维

Mermaid 已成为技术团队快速绘制架构图、流程图、状态图的事实标准。传统 Mermaid 图仅以 2D 呈现。iCraft Editor 提供“Mermaid 3D 可视化”功能，将标准 Mermaid 图在编辑器中一键转换为真三维可交互的场景，让沟通 、演示与决策更高效更直观。

功能亮点

• 支持主流图类型：原生解析 architecture、flowchart-v2、stateDiagram
• 样式直通：自动映射填充、描边、文字颜色与线宽等样式
• 真三维元素：平面、立方体、圆柱、球体、多边形以及 3D 模型库，支持阴影与材质
• 自动相机构图：根据图整体包围盒自动计算视角与倾角，开箱即用
• 分层分组与标签：组按高度分层，标签对齐更清晰
• 连线与箭头：支持曲线路由、箭头/双箭头、虚线等表现
• 关联关系可追踪：节点回写其关联的连线，便于交互选择与联动
• 模型智能匹配：对于 architecture 图，会按 icon 标签智能匹配到 3D 模型库，图形更具表现力

architecture

建议使用 architecture-beta 来书写架构图，结合 iCraft 的 3D 映射，能快速从文本生成专业的三维架构场 景。

对于 flowchart 以及 stateDiagram，mermaid 语法本身包含样式逻辑，所以在 iCraft 中，会根据 mermaid 语 法的样式来渲染 3D 图形，不会自动匹配 3D 模型库。

语法速览

• 组：group 组ID(图标)[标题] 可选 in 父组ID
• 服务/组件：service 组件ID(图标)[标题] 可选 in 组ID
• 边：源ID:侧 -- 侧:目标ID，侧取 T/B/L/R，箭头可用 -->、<--、<-->
• 组外连线：源ID{group}:侧 --> 侧:目标ID{group}，用于跨组连线
• 分叉：junction 分叉ID，配合多条边实现四向分叉

示例：

architecture-beta
  group api[API]
  group public[Public API] in api
  group private[Private API] in api


  service serv1(server)[Server] in public


  service serv2(server)[Server] in private
  service db(database)[Database] in private

  service gateway(internet)[Gateway] in api

  serv1:B -- T:serv2

  serv2:L -- R:db

  serv1:L -- R:gateway

architecture-beta
        group api[API]
        group public[Public API] in api
        group private[Private API] in api


        service serv1(server)[Server] in public


        service serv2(server)[Server] in private
        service db(database)[Database] in private

        service gateway(internet)[Gateway] in api

        serv1:B -- T:serv2

        serv2:L -- R:db

        serv1:L -- R:gateway

icon 标识即 3D 模型名称

• 在 iCraft 中，icon 标识会直接映射到内置 3D 模型库的“名称”（大小写不敏感），从而将二维占位自动替 换为对应 3D 模型。

• 推荐使用与模型库一致的简短名称：Server、Database、Storage、Gateway、Cloud、Internet、Redis 等。

• 示例：

  • service app(server)[App Server] → 渲染为 3D 服务器模型
  • service db(database)[Database] → 渲染为 3D 数据库模型
  • service storage(disk)[Storage] → 渲染为 3D 存储模型
  • service gateway(internet)[Gateway] → 渲染为 3D 网络/网关模型

• 若 icon 未匹配到模型库的名称，则自动回退为立方体表现。

• () 中的是图标/组件类型，[] 中的是显示标题；两者可独立设置。

参考资料：Mermaid Architecture Beta 语法说明 https://mermaid.js.org/syntax/architecture.html (opens in a new tab)

效果

flowchart

语法速览

• 图方向：graph TD、LR、TB、RL
• 节点形状：A[矩形]、B([圆角矩形])、C((圆形))、D{菱形}
• 连线：A --> B、A ==> B、A -- 文本 --> B
• 边样式：linkStyle 索引列表 属性
• 类样式：classDef 名称 属性；class 节点列表 名称
• 子图：subgraph 标题 ... end

参考资料：Mermaid flowchart 语法说明 https://mermaid.js.org/syntax/flowchart.html (opens in a new tab)

示例：

graph TD
  A([Start]) ==> B[Step 1]
  B ==> C{Flow 1}
  C -- Choice 1.1 --> D[Step 2.1]
  C -- Choice 1.3 --> I[Step 2.3]
  C == Choice 1.2 ==> E[Step 2.2]
  D --> F{Flow 2}
  E ==> F{Flow 2}
  F{Flow 2} == Choice 2.1 ==> H[Feedback node]
  H[Feedback node] ==> B[Step 1]
  F{Flow 2} == Choice 2.2 ==> G((Finish))

  linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px

  classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
  classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
  classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
  classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px

  class A start_node;
  class B,C,E,F,H active_node;
  class D unactive_node;
  class G finish_node;
  class I bugged_node

graph TD
      A([Start]) ==> B[Step 1]
      B ==> C{Flow 1}
      C -- Choice 1.1 --> D[Step 2.1]
      C -- Choice 1.3 --> I[Step 2.3]
      C == Choice 1.2 ==> E[Step 2.2]
      D --> F{Flow 2}
      E ==> F{Flow 2}
      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
      H[Feedback node] ==> B[Step 1]
      F{Flow 2} == Choice 2.2 ==> G((Finish))

      linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px

      classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
      classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
      classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
      classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px

      class A start_node;
      class B,C,E,F,H active_node;
      class D unactive_node;
      class G finish_node;
      class I bugged_node

效果

stateDiagram

语法速览

• 方向：direction TB、LR
• 初始/结束：[*] --> State、State --> [*]
• 转移：A --> B、A --> B: 标签
• 可访问性：accTitle、accDescr
• 类样式：classDef 名称 属性；class 状态列表 名称

参考资料：Mermaid stateDiagram 语法说明 https://mermaid.js.org/syntax/stateDiagram.html (opens in a new tab)

示例：

stateDiagram
  direction TB

  accTitle: This is the accessible title
  accDescr: This is an accessible description

  classDef notMoving fill:white
  classDef movement font-style:italic
  classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

  [*]--> Still
  Still --> [*]
  Still --> Moving
  Moving --> Still
  Moving --> Crash
  Crash --> [*]

  class Still notMoving
  class Moving, Crash movement
  class Crash badBadEvent
  class end badBadEvent

stateDiagram
      direction TB

      accTitle: This is the accessible title
      accDescr: This is an accessible description

      classDef notMoving fill:white
      classDef movement font-style:italic
      classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

      [*]--> Still
      Still --> [*]
      Still --> Moving
      Moving --> Still
      Moving --> Crash
      Crash --> [*]

      class Still notMoving
      class Moving, Crash movement
      class Crash badBadEvent
      class end badBadEvent

上述样式（如 class、箭头）会被自动解析并在三维场景中映射为颜色、连线、箭头与材质阴影等视觉效果。

效果

为什么选择三维可视化

• 更强的层次表达：多层级架构、嵌套与分组在空间中更直观
• 更好的演示效果：旋转、缩放与视角切换让讲解更生动
• 更多信息维度：颜色、透明度、形状、材质、阴影共同传达状态
• 更适合复杂系统：分布式、微服务、云原生等复杂拓扑更清晰

典型场景：

• 技术评审与方案宣讲：以 3D 场景呈现架构与流程，提升说服力
• 跨团队协作：为研发、产品、运维提供统一的空间化语言
• 培训与演练：配合相机视角与动画，构建更沉浸的演示体验

一键上手

1. 在 iCraft Editor 中粘贴 Mermaid 代码
2. 选择“Mermaid 3D 可视化”，自动解析并生成 3D 场景
3. 鼠标拖拽、旋转与缩放查看不同角度；支持选择元素与连线进行联动

直达链接 https://icraft.gantcloud.com/app/editor?defaultOpen=mermaid&preview=true (opens in a new tab)

FAQ

目前支持的语法有哪些？

答：经过评估，以下几种图形类型适合 3D 可视化，且目前已得到支持：

• architecture
• flowchart
• stateDiagram

如有其他图形的强烈需求，请联系我们。

处理逻辑是否在客户端进行？

答：是，所有解析与 3D 渲染在浏览器本地完成。Mermaid 数据不会上传到服务端，保证您的隐私。