Figma plugin

Mermaid-to-Flow

Convert Mermaid markup to FigJam flowcharts

by Travis Gregory

users
7.8K
likes
45
saves
551
comments
2
Open in Figma
FreeWorks inFigJam
Price
Free
Latest version
v3 · Jun 16, 2025
First published
Jun 14, 2025
Publisher
Travis Gregory
Features

What Mermaid-to-Flow does

Summarised from Travis Gregory's description on the Figma Community.

  • 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

On this page
Overview

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.

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.

Changelog

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
Trust

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.

Compare

Mermaid-to-Flow alternatives

  1. 1

    Figma to Code

    by Bernardo Ferrari

    2.4M users8.9KFree

    Code Conversion Made Easy: Figma to Web & Apps

    View details
  2. 2

    Anima

    by Anima

    1.9M users18KFree

    Anima - AI Design to code, Vibe code, Vibe design

    View details
  3. 3

    Builder.io

    by Steve Sewell

    1.3M users23KFree

    Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

    View details
  4. 4

    Figma to HTML with Framer

    by Framer

    643K users12KFree

    Convert your Figma design to HTML code in seconds with Framer.

    View details
  5. 5

    SkewDat

    by Unfold

    640K users7.3KFree + $2/mo upgrade

    Skew any layer or group with all layers preserved to edit.

    View details
  6. 6

    Locofy Lightning

    by Locofy.ai

    608K users5.4KFree

    Convert Figma designs to code in a flash: React, React Native, Flutter, HTML/CSS, Angular, Next, Vue

    View details
FAQ

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 Figma to Code, Anima and Builder.io.

For developers

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.

Mermaid-to-Flow on figmaplugins.co

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>

Want it featured on figmaplugins.co? Submit it for review