Extrieve Blog

Want to quickly visualize technical concepts? Let’s get straight to the point.

Step 1: Chat with ChatGPT

Start with a simple instruction to ChatGPT. Tell it exactly what you need, for example:

• “create mermaid code for simple compture artchitecture diagram”

You’ll receive mermaid code that represents the diagram you requested.

graph LR;

style User fill:#86c7f3,stroke:#333,stroke-width:2px;
style Application fill:#7ed957,stroke:#333,stroke-width:2px;
style OperatingSystem fill:#f3a986,stroke:#333,stroke-width:2px;
style Hardware fill:#f5f586,stroke:#333,stroke-width:2px;

subgraph User;
  A[User];
end

subgraph Application;
  B[Application];
end

subgraph OperatingSystem;
  C[Operating System];
end

subgraph Hardware;
  D[Hardware];
end

A -->|Interacts with| B;
B -->|Communicates with| C;
C -->|Manages hardware resources| D;

Step 2: Paste in Mermaid Live Editor

Take the code to Mermaid Live Editor, paste it, and watch your diagram form. Adjust if you have any customizations in mind.

Step 3: Import to Draw.io

Finally, with your tweaked mermaid code, head over to draw.io:

• Click Arrange > Insert > Advanced > Mermaid in draw.io.
• Paste the code into the popup box.
  
  

That’s it — you’ve got your diagram ready to go!