MermaidStudio: As a PM, I Built a Native Mac Mermaid Editor to Fix My AI-to-Client Workflow

As a Product Manager, I live in flowcharts, sequence diagrams, and user journeys. Over the past year, my workflow for creating diagrams has evolved into a heavy collaboration with AI: I brainstorm product logic with AI, have it generate.md files with Mermaid.js syntax, and then I need to review, tweak, and send clean diagram images to clients and stakeholders for confirmation.

Sounds simple, right? Yet every single day, the "last mile" of this workflow frustrated me.

When you need to send 10 different flowcharts to a client in a single afternoon, existing tools start getting in your way:

I wanted a native tool built specifically for this speed and structure. Since I couldn't find an editor that felt right, I built my own: MermaidStudio.

I designed MermaidStudio as a 100% native Apple ecosystem app (built with SwiftUI) around two core workflows:

This is the feature I use dozens of times a day. When a client asks for a quick logic adjustment during a meeting, I don't want to fumble through export menus.

In MermaidStudio, you can bind custom keyboard shortcuts directly to:

Best of all, the export engine always calculates the full SVG bounding box at 100% scale. Even if your preview pane is zoomed in at 400% while inspecting a tiny node, hitting your Copy as Image shortcut always copies the entire, uncropped, high-DPI diagram.

As a PM, I realized not all diagrams should live in the same place. MermaidStudio supports a dual workflow that matches how projects actually happen:

I wanted to keep the pricing simple and accessible:

To celebrate sharing MermaidStudio with the DEV.to community, I’ve prepared 100 discount links for 50% OFF in a shared Google Sheet:

I’d love to hear how you manage your diagrams—do you keep them inside project.md files or in a dedicated library? Drop a comment below if you grab a code or have any feature requests!