On this page
About Mermaid-to-Flow
Mermaid-to-Flow is a free Figma plugin published by Travis Gregory in 2025. It works in FigJam and has 7,816 users and 45 likes on the Figma Community. It ranks #16 in Flowcharts & User Flows and #20 in FigJam on our lists.
In the developer's words
Transform Mermaid markup into professional FigJam flowcharts with smart layouts, text wrapping, edge labels, and industry-standard color coding.
Features:
• Smart hierarchical layouts with automatic positioning
• Professional color coding (green start, red end, yellow decisions)
• Edge labels for annotated workflows (A -->|"label"| B)
• Shape-specific text wrapping for clean diagrams
• Support for rectangles [text], diamonds {text}, and ellipses (text)
• Both top-down (TD) and left-right (LR) layouts
• No external dependencies - works entirely within FigJam
Perfect for business process documentation, software workflows, and technical diagrams. Simply paste your Mermaid code and generate publication-ready flowcharts instantly.
What's new
Version 3 · released Jun 16, 2025
- ## [2.7.1] - 2025-06-15
- ### 🐛 Critical Bug Fixes
- Fixed standalone node parsing**: Now correctly parses both standalone node definitions and edge connections
- Issue**: Nodes were displaying IDs (Q, C, T) instead of text labels ("Pick a drink", "Coffee", "Tea")
- Root cause**: Parser only processed edge connections, ignored standalone node definitions
- Solution**: Enhanced parser to handle both `Q{Pick a drink}` definitions AND `Q --> C` connections
- Complete syntax support**: All node types now correctly display text labels
- `[Rectangle text]` ✅
- `{Diamond text}` ✅
- `(Ellipse text)` ✅
- `([Ellipse text])` ✅ (both ellipse syntaxes supported)
- ### 🔧 Code Quality Improvements
- Removed dead code**: Eliminated unused `_calculateLegacyLayout()` function (39 lines removed)
- Optimized function signatures**: Removed unused `levels` parameter from `resolveNodeCollisions()`
- Consolidated configuration**: Created unified `SHAPE_CONFIG` object for all node types
- Before**: Scattered across `getShapeTextConfig()`, `getNodeColors()`, `getShapeType()`
- After**: Single source of truth with `SHAPE_CONFIG` and `ROLE_COLORS` objects
- Enhanced do
Permissions and privacy
Network access
Mermaid-to-Flow declares no network access, so it runs entirely inside Figma and can't send your file anywhere.
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest.
Where Mermaid-to-Flow ranks
Mermaid-to-Flow alternatives
- 1
Simpleflow
by Lichin
107K users1.9KFree + $10 upgrade🪄 Create flowcharts in Figma with native FigJam connectors — stay perfectly in sync as you design!
- 2
ProToFlow
by Saeed Alipoor
81K users1.1KFreeGenerate Flow Arrows based on Prototype Interactions
- 3
Simple Arrow Drawer
by John Cho
70K users85FreeSimple Arrow Drawer
- 4
Mermaid in Figma
by art
46K users291FreeEnable to use Mermaid code in Figma
- 5
Flowy
by Nathan
41K users439FreeEffortlessly create and customize connections (user flows) between components in Figma.
- 6
Flow Connect
by Yunser
33K users27Free
Mermaid-to-Flow FAQ
What does Mermaid-to-Flow do?
Convert Mermaid markup to FigJam flowcharts. It's a Figma plugin by Travis Gregory that runs in FigJam.
Is Mermaid-to-Flow free?
Yes. Mermaid-to-Flow is free to install and run from the Figma Community, with no paid tier listed.
Is Mermaid-to-Flow safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. Mermaid-to-Flow declares no network access, so it runs entirely inside Figma and can't send your file anywhere. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install Mermaid-to-Flow?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to Mermaid-to-Flow?
By user count, the closest alternatives are Simpleflow, ProToFlow and Simple Arrow Drawer. Compare all of them on the best Figma plugins for flowcharts & user flows.
Built this plugin?
Use this page as a landing page for Mermaid-to-Flow: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/mermaid-to-flow/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Mermaid-to-Flow on figmaplugins.co" width="220" height="48"></a>