> 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/advanced-tips/quick-conversion-of-2d-architecture-diagram-into-3d.md).

# Quick Conversion of 2D Architecture Diagram into 3D

In real-world work scenarios, many users already have well-developed **2D architecture diagrams** (such as those created in PowerPoint, Visio, whiteboard sketches, or images). However, when presenting solutions, reporting to clients, explaining products, or demonstrating digital twins, a **3D architecture diagram that is more intuitive, visual, and interactive** is often far more effective.

With the built-in capabilities of **iCraft** and the help of **AI tools**, you can quickly upgrade your diagram through the following workflow:

**2D Architecture Diagram → AI Recognition → Mermaid Code → Import into iCraft → Auto-generate 3D Architecture → Fine-tune Details → Export for Presentation**

This section walks you through the full process so you can complete the transition **from 2D to 3D in just a few minutes**.

{% stepper %}
{% step %}

### Step1: Use AI to Convert a 2D Architecture Diagram into Mermaid Code

First, prepare your **2D architecture diagram**. In this example, we use a typical **system architecture diagram**.

![](/files/pbvV14F6AOCqBhfVjYUX)

Upload the image to an AI tool and ask it to convert the diagram into **Mermaid code**.

Recommended prompt example:

`Please analyze this system architecture diagram, convert it into Mermaid code, retain the system hierarchical structure, mark all module names, and clearly represent the data flow direction.`

After generation is complete, please copy the complete Mermaid code for backup. The following is the Mermaid code provided by AI, which uses the Flowchart mode.

**Note**: The Mermaid types supported by iCraft are **`architecture`, `flowchart-v2`, `stateDiagram`, and `sequenceDiagram`**. You can specify these types in the AI prompt to ensure the code is rendered effectively in iCraft.

{% code lineNumbers="true" expandable="true" %}

```
flowchart TB

%% Client Layer
subgraph Client_Layer["Client Layer"]
    Web[Web Frontend]
    Mini[Mini Program]
    Mobile[Mobile App]

    Web -->|HTTP Request| Mobile
    Mini -->|API Call| Mobile
    
end

%% Service Layer
subgraph Service_Layer["Service Layer"]
    Gateway[API Gateway]

    UserService[User Service]
    OrderService[Order Service]
    ProductService[Product Service]

    Toolkit[Utility Toolkit]

    Gateway -->|Routing to| UserService
    Gateway -->|Routing to| OrderService
    Gateway -->|Routing to| ProductService

    OrderService -->|Data Interaction| Toolkit
    ProductService -->|Data Interaction| Toolkit
end

%% Data Layer
subgraph Data_Layer["Data Layer"]
    OSS[File Storage / OSS]
    MySQL[(MySQL Database)]
    Redis[(Redis Cache)]

    OSS -->|Interaction| MySQL
    MySQL -->|Reads| Redis
end

%% Cross Layer Connections

Mobile --> Gateway

UserService -->|Data Interaction| MySQL
OrderService -->|Data Interaction| MySQL
ProductService -->|Data Interaction| MySQL

Toolkit --> Redis


```

{% endcode %}
{% endstep %}

{% step %}

### Step2: Import the Mermaid Code into iCraft

1. Enter the iCraft editor, create a new scene, and select “**Mermaid 3D Visualization”** from the navigation bar.
2. Paste the Mermaid code you just generated into the pop-up code input box, then click “**Apply”**.
3. The system will automatically parse the structural relationships and create the corresponding 3D architecture scene on the canvas. The structure and logic of the generated 3D scene are completely consistent with the 2D architecture diagram.

![](/files/1EKUqGYbcLckS9OIT62r)
{% endstep %}

{% step %}

### Step 3: Fine-tune Colors, Materials and Models

To achieve a more professional visual effect for the 3D architecture, further refined adjustments can be made:

* Adjust the color scheme to make the hierarchy clear at a glance.
* Replace models to make objects more refined and expressive.
* Adjust the layout and align modules for a more presentation-friendly overall structure.

Below is an example architecture diagram after adjustments:

![](/files/yW7o9FdUF5GE2iQP6H9m)
{% endstep %}
{% endstepper %}

***

## Export & Share Results

Upon completion, you can:

* Export high-definition images up to 8K resolution
* Generate online shareable links for direct browser presentation
* Export code for embedding into web pages or systems
* Create videos to insert into presentations for client demos
* Serve as the foundation for digital twin application scenarios
* Use other creative and expressive demonstration formats


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.icraft.design/advanced-tips/quick-conversion-of-2d-architecture-diagram-into-3d.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.