Welcome to our interactive flowchart creator! This tool allows you to visualize processes, workflows, and decision paths with colorful, professional diagrams – no coding expertise required.
Editor Diagrammi Mermaid
Diagram Preview
What You Can Create
The diagram editor lets you create flowcharts that visually represent:
- Step-by-step processes
- Decision workflows
- Data analysis pipelines
- Project lifecycles
- System architectures
Our built-in examples show common flowchart patterns, including a colorful data analysis workflow that demonstrates decision points, feedback loops, and clear process steps.
How to Use the Editor
- Start with a template: Select from our pre-built examples using the dropdown menu
- Edit the diagram: Modify the code in the text area to customize your flowchart
- Generate your visualization: Click the “Run” button to create your diagram
- Adjust the view: Use the zoom controls to focus on specific areas
- Export your work: Download your diagram as an SVG file for use in presentations or documents
Try it now by selecting an example from the dropdown or creating your own flowchart from scratch!
flowchart TD
A[Start] --> B[Data Collection]
B --> C{Data Complete?}
C -->|Yes| D[Data Processing]
C -->|No| E[Request More Data]
E --> B
D --> F[Analysis Phase]
F --> G{Results OK?}
G -->|Yes| H[Prepare Report]
G -->|No| I[Refine Analysis]
I --> F
H --> J[Present Results]
J --> K[End]
classDef start fill:#22c55e,stroke:#166534,stroke-width:2px,color:white,font-weight:bold
classDef process fill:#3b82f6,stroke:#1e40af,stroke-width:1px,color:white
classDef decision fill:#f59e0b,stroke:#b45309,stroke-width:1px
classDef feedback fill:#8b5cf6,stroke:#5b21b6,stroke-width:1px,color:white
classDef finish fill:#ef4444,stroke:#991b1b,stroke-width:2px,color:white,font-weight:bold
class A start
class B,D,F,H,J process
class C,G decision
class E,I feedback
class K finish
When asking GPT-3.5 Mini to create Mermaid flowcharts that work in your widget, it’s essential to provide clear and specific instructions. Here’s how to craft an effective prompt:
Basic Prompt Template
Create a Mermaid diagram for a [describe your workflow] using the exact syntax 'flowchart TD'.
Use this precise arrow format: A -->|Label| B for all connections.
Use square brackets for regular nodes [Step] and curly braces for decision nodes {Question?}.
Define classes with these exact attributes:
classDef className fill:#hexcolor,stroke:#hexcolor,stroke-width:2px,color:white,font-weight:bold
DO NOT use 'default' or 'end' as class names - use 'standard' or 'finish' instead.
Assign appropriate classes to all nodes.Example Specific Prompt
Create a Mermaid diagram for a customer support workflow using the exact syntax 'flowchart TD'.
Use this precise arrow format: A -->|Label| B for all connections.
Use square brackets for regular nodes [Step] and curly braces for decision nodes {Question?}.
Define 4 classes:
classDef start fill:#22c55e,stroke:#166534,stroke-width:2px,color:white,font-weight:bold
classDef standard fill:#3b82f6,stroke:#1e40af,stroke-width:2px,color:white,font-weight:bold
classDef decision fill:#f97316,stroke:#9a3412,stroke-width:2px,color:white,font-weight:bold
classDef finish fill:#dc2626,stroke:#7f1d1d,stroke-width:2px,color:white,font-weight:bold
DO NOT use 'default' or 'end' as class names.
The diagram should show the process from receiving a customer ticket to resolution, including decision points for escalation.Tips for Better Results
- Be explicit about syntax: Specify the exact format for nodes, arrows, and classes
- Avoid problematic keywords: Specifically tell the model not to use reserved words
- Request specific colors: Provide hex codes for colors you want to use
- Specify diagram complexity: Mention how many nodes you want (e.g., “around 10 nodes”)
- Describe the flow: Briefly explain what the diagram should represent
- Ask for specific elements: If you need decision points or feedback loops, explicitly request them
Remember that the more precise your instructions, the better the results will be. GPT-3.5 Mini performs well with clear, structured prompts that leave little room for interpretation
