What is this tool?
10xDev Mermaid Maker is a powerful, client-side text-to-diagram
tool designed for developers, product managers, and educators. It allows you to transform
simple text code into beautiful, sketchy, hand-drawn diagrams instantly.
Powered by Mermaid.js, it supports Flowcharts, Sequence Diagrams, Mindmaps,
Gantt Charts, and more—all exported with a unique artistic flair suitable for presentations,
documentation, or social media.
🔥 Supported Diagram Types
- Flowcharts:
graph TD or graph LR
- Mindmaps:
mindmap for brainstorming
- Timelines:
timeline for project history
- Sequence Diagrams:
sequenceDiagram
- Entity Relationship:
erDiagram
- Gantt Charts:
gantt
⚡ Pro Tips
- Themes: Use the theme selector to switch between 10+ styles like
Blueprint, Cyberpunk, or Arabic Ruqaa.
- Formats: Use the "Format" dropdown to crop your diagram for
Instagram Stories (9:16) or LinkedIn Posts (Square).
- Drag & Pan: In format mode, drag the diagram to position it
perfectly inside the frame.
- Organic Mode: Toggle "Organic" in the top bar to switch between
straight lines and hand-drawn wobbly lines.
Step 1: Define Nodes
Nodes are the basic building blocks. You give them an ID (for code) and
a Label (for display).
A[This is a Rectangle]
B(This is Round)
C{This is a Diamond}
D((This is a Circle))
Step 2: Connect Them
Draw lines between your node IDs. Use the "Organic" toggle in the header
to make these arrows wavy/hand-drawn automatically!
A --> B // Standard Arrow
A --- B // Line only (no arrow)
A -.-> B // Dotted Arrow
A ==> B // Thick Arrow
A -->|Text Label| B // Connection with
text
Step 3: Direction
Start your code by defining the direction of the flow.
graph TD // Top to Bottom
graph LR // Left to Right
Complete Example
graph TD
Start((Start)) --> A{Is it Working?}
A -->|Yes| B[Great!]
A -->|No| C[Fix It]
C -.-> Start