KemptoneJustin Kempton developer tools

New utility

Mermaid Flowchart Formatter

Paste a Mermaid flowchart, choose a formatting style, and get a narrower version that is easier to read without redrawing everything by hand.

How it works

This first version is rule-based, not AI-driven. It is strongest with standard Mermaid flowcharts, long labels, and one main workflow path with light branching.

Output

Formatted Mermaid

Phased
flowchart TB

    A["Request arrives"] --> B["Triage:<br/>product-only or<br/>shared?"]
    B -->|Product-only| C["Send back to app team"]
    B -->|Shared| D["Define<br/>component/token/block<br/>scope"]

    subgraph Scope & Design
        D --> E["Align with Figma and<br/>naming"]
    end

    subgraph Implementation
        E --> F["Implement code change"]
        F --> G["Add tests,<br/>stories,<br/>docs,<br/>metadata,<br/>Code Connect updates"]
    end

    subgraph Review & Release
        G --> H["Review accessibility<br/>and API impact"]
        H --> I["Add Changeset and<br/>choose version bump"]
        I --> J["Merge and publish to<br/>private npm"]
        J --> K["Update consumers and<br/>release notes"]
    end

Preview

Rendered diagram

Rendering
Rendering preview...

Best input

Standard Mermaid `flowchart` syntax with a main path, a few branches, and readable node IDs.

Good first try

Start with Wrapped if you are unsure. It usually improves readability without changing the structure very much.

What is next

Mermaid itself also supports more advanced shape libraries, richer config, and alternate layout engines like ELK if you want this tool to grow further.