Generating Flowcharts and Diagrams with Mermaid and draw.io Using ChatGPT

Recently, the author explored using ChatGPT to produce Mermaid syntax for various diagrams and then importing that code into draw.io, aiming to improve the accuracy and relevance of GPT-generated answers for workflow chart creation.

In modern work environments, workflow diagrams are essential for visualizing complex processes, but traditional manual drawing or specialized tools pose challenges such as increasing complexity, error‑prone revisions, and steep learning curves.

Draw.io Overview

draw.io is a popular online diagramming tool that supports many diagram types (flowcharts, org charts, network diagrams, UML, floor plans, etc.), offers an intuitive drag‑and‑drop interface, real‑time collaboration, and import/export capabilities for formats like XML, PNG, JPEG, and PDF.

Mermaid Syntax Overview

Mermaid provides a simple text‑based language to create flowcharts, sequence diagrams, Gantt charts, entity‑relationship diagrams, and more, allowing users to generate complex visualizations without a graphical editor and export them as PNG, SVG, or embed as HTML.

Using Mermaid to Create a Flowchart

graph LR</code><code>    A-->B</code><code>    B-->C</code><code>    C-->D</code><code>    D-->E

Using Mermaid to Create a Sequence Diagram

sequenceDiagram</code><code>    participant A</code><code>    participant B</code><code>    A-->>B: 请求数据</code><code>    B-->>A: 返回数据

Using Mermaid to Create a Gantt Chart

gantt</code><code>    title 项目计划</code><code>    dateFormat  YYYY-MM-DD</code><code>    section 项目A</code><code>    任务1          :a1, 2024-06-01, 7d</code><code>    任务2          :after a1, 3d</code><code>    section 项目B</code><code>    任务3          :2024-06-10, 5d</code><code>    任务4          :2024-06-15, 4d

Using Mermaid to Create an Entity‑Relationship Diagram

erDiagram</code><code>    CUSTOMER ||--o{ ORDER : places</code><code>    ORDER ||--|{ LINE-ITEM : contains</code><code>    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

The generated Mermaid code can be imported into draw.io via the "Insert > Advanced > Mermaid" option, producing visual diagrams as shown in the accompanying screenshots, demonstrating a streamlined workflow from prompt to final diagram.