> For the complete documentation index, see [llms.txt](https://docs.icraft.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.icraft.design/editor-features/navigation-bar/labs/mermaid-3d-visualization.md). # 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 {% code lineNumbers="true" expandable="true" %} ``` 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 ``` {% endcode %} *** #### 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: #### 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: #### Example Code {% code lineNumbers="true" expandable="true" %} ``` 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 ``` {% endcode %} #### 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: #### Example Code: {% code expandable="true" %} ``` 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 ``` {% endcode %} 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 {% code lineNumbers="true" expandable="true" %} ``` sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! ``` {% endcode %} #### Result
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.icraft.design/editor-features/navigation-bar/labs/mermaid-3d-visualization.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.