Mermaid 3D Visualization

Mermaid has become the de facto standard for technical teams to quickly draw architecture diagrams, flowcharts, and state diagrams. Traditional Mermaid diagrams are only presented in 2D. The iCraft Editor provides a Mermaid 3D Visualization feature that converts standard Mermaid diagrams into true 3D interactive scenes in the editor with one click, making communication, presentation, and decision-making more efficient and intuitive.

Key Capabilities

• Supported main diagram types Native parsing for architecture、flowchart-v2、stateDiagram、sequenceDiagram

• Style Mapping Automatically maps Mermaid styles such as fill color, stroke color, text color, and line width into the 3D scene.

• True 3D Elements Supports rendering nodes as planes, cubes, cylinders, spheres, polygons, and models from the 3D model library, with materials and shadows.

• Automatic Camera Perspective The editor automatically calculates camera position and tilt perspective based on the overall bounding box of the diagram, allowing the scene to be ready for viewing immediately.

• Layered Grouping and Labels Groups are organized in vertical layers, and labels are aligned for improved readability.

• Connections and Arrows Supports curved routing, single or double arrows, dashed lines, and other visual styles.

• Traceable Relationships Nodes record their associated connections, making it easy to interactively select nodes and highlight related edges.

• Intelligent Model Matching For architecture diagrams, the system automatically matches icon tags with models in the 3D asset library, creating more expressive visuals.

---

Architecture

It is recommended to use architecture-beta when writing architecture diagrams. Combined with iCraft’s 3D mapping, it allows you to quickly generate professional 3D architecture scenes from text.

For flowchart and stateDiagram, Mermaid syntax already contains style definitions. Therefore, iCraft will render the 3D visualization based on Mermaid’s style rules, rather than automatically matching the 3D model library.

Syntax Overview

• Group group GroupID(icon)[Title] optional [in ParentGroupID]

• Service / Component service ComponentID(icon)[Title] optional in GroupID

• Edge SourceID:Side -- Side:TargetID Sides: T/B/L/R; arrows: -->, <--, <-->

• Cross-group connection SourceID{group}:Side --> Side:TargetID{group} Used to create connections between nodes in different groups.

• Junction junction JunctionID Used with multiple edges to create four-way branching connections.

Example Code

architecture-beta
        group api(cloud)[API]

        service db(database)[Database] in api
        service disk1(disk)[Storage] in api
        service disk2(disk)[Storage] in api
        service server(server)[Server] in api
        service gateway(internet)[Gateway] 

        db:L -- R:server
        disk1:T -- B:server
        disk2:T -- B:db
        server:T -- B:gateway

---

Icon Identifier as 3D Model Name

In iCraft, the icon identifier is directly mapped to the name of a model in the built-in 3D model library (case-insensitive).

This allows a 2D placeholder icon to be automatically replaced by a corresponding 3D model.

Recommended to use short names that match the model library, such as Server、Database、Storage、Gateway、Cloud、Internet、Redis

• Examples

  • service app(server)[App Server] → rendered as 3D server model

  • service db(database)[Database] → rendered as 3D database model

  • service storage(disk)[Storage] → rendered as 3D storage model

  • service gateway(internet)[Gateway] → rendered as 3D network/gateway model

• If the icon does not match any model in the library, it automatically falls back to a cube.

• () defines the icon or component type. [] defines the display title. These two elements can be configured independently.

Reference

Mermaid Architecture Beta Syntax: https://mermaid.js.org/syntax/architecture.html

Result

---

Flowchart

Syntax Overview

• Direction: graph TD, LR, TB, RL

• Node shapes: A[rect], B([rounded]), C((circle)), D{diamond}

• Connections: A --> B, A ==> B, A -- text --> B

• Edge style: linkStyle indexList properties

• Class style: classDef name properties; class nodeList name

• Subgraph: subgraph title ... end

Reference:

Mermaid flowchart Syntax: https://mermaid.js.org/syntax/flowchart.html

Example Code

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

Result

---

StateDiagram

Syntax Overview

• Direction: direction TB, LR

• Initial / final: [*] --> State, State --> [*]

• Transition: A --> B, A --> B: label

• Accessibility: accTitle, accDescr

• Class style: classDef name properties; class stateList name

Reference:

Mermaid stateDiagram Syntax: https://mermaid.js.org/syntax/stateDiagram.html

Example Code:

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

Styles above (such as class, arrows) are automatically parsed and mapped to visual effects in the 3D scene, including color, connections, arrows, materials, and shadows.

Result

---

SequenceDiagram

Syntax Overview

• Participants: participant name [as alias], actor name [as alias] (actor appears as a human icon)

• Message arrows:

  • --> solid arrow (sync, no activation)

  • ->> solid arrow (sync)

  • -->> dashed arrow (return)

  • -) solid arrow (async, no tail)

  • -> solid arrow (async)

• Message: sender[arrow]receiver: label text

• Note: Note left/right/over participant: text, Note over A,B: text

• Loop / condition:

  • loop [label]: ... end

  • alt [label]: ... else [label]: ... end

  • opt [label]: ... end

  • par [label]: ... and [label]: ... end (parallel)

• Background highlight: rect rgb(r,g,b) ... end

• Accessibility: accTitle: title, accDescr: description

Example Code

sequenceDiagram 
     Alice->>John: Hello John, how are you? 
     John-->>Alice: Great! 
     Alice-)John: See you later!

Result