DEV Community

Lim Wu
Lim Wu

Posted on Edited on

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

#mermaid #ai #productivity #diagram

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.

The Friction in Existing Mermaid Editors

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

  1. Too many clicks just to share an image: In web editors like mermaid.live, exporting a clean image or copying it to the clipboard takes multiple menu clicks every single time.
  2. Cropped or blurry exports: In many Markdown previewers, taking a snapshot only captures the current viewport—if your diagram is zoomed in or too wide, edges get cut off.
  3. Disconnected from local AI .md files & finalized archives: Sometimes I just want to quickly preview a temporary .md file generated by AI in a project folder; other times, once a diagram is finalized and approved by a client, I want it archived cleanly in a central library synced to my iPad—not buried in random local folders.

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.

Code in. Diagram out.

How MermaidStudio Speeds Up My Daily PM & AI Workflow

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

1. Custom Keyboard Shortcuts for Instant Export & "Copy as Image" ⚡️

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:

  • Copy as Image — Renders the complete, high-resolution diagram straight to your system clipboard. Just hit your shortcut and press ⌘ + V in Slack, Teams, WeChat, Email, or Keynote!
  • Export as PNG / PDF / HTML — Direct one-key file export.
  • Global Hotkey — Summon MermaidStudio instantly from anywhere on your Mac.

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.

Your export keys.

2. A Two-Stage File Workflow: External AI Drafts vs. Built-in iCloud Library 🗂️

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:

  • Stage 1 — Fast Iteration with External Files (.md / .mmd): When I'm actively iterating on a PRD or system design with AI tools (like Claude, Cursor, or ChatGPT) inside a local folder, I open the external .md, .markdown, or .mmd files directly in place. I can visually inspect the diagram, save right back to disk, and fire off quick snapshots to clients.
  • Stage 2 — Finalized Specs & Templates in the Built-in Library: Once a diagram is signed off by the client—or when I create reusable workflow templates (like standard auth flows or payment sequences)—I save a clean copy into MermaidStudio’s internal three-column Library (organized into project/client Folders, Inbox, Recent, and Trash).
  • Always in Your Pocket via iCloud: Because the built-in library syncs automatically across Mac, iPad, and iPhone via iCloud, all my finalized client diagrams are always with me. I can walk into a meeting with just my iPad or iPhone, pull up any approved architecture diagram in full-screen mode, and zoom in with zero lag.

Image description:Keep diagrams organised.

Pricing: $5.99 Across the Apple Ecosystem + 50% OFF for DEV Community 🎁

I wanted to keep the pricing simple and accessible:

  • Free Tier: Keep up to 3 active diagrams in your built-in library, with free PNG / PDF / HTML export and free iCloud Sync included.
  • Pro ($5.99 across Mac, iPad & iPhone): One purchase unlocks Pro across all your Apple devices—giving you unlimited library files & folders, Trash recovery, one-click Copy as Image shortcuts, and direct external .md/.mmd file editing.

🎉 Special Launch Gift: 100 Self-Serve Codes for 50% OFF!

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

  1. 👉 Download MermaidStudio on the App Store
  2. 🎟 Grab a 50% OFF Redemption Link from this Google Sheet (Simply click any unused link in Column B to redeem, and check the box ☑️ in Column C so the next reader knows it's claimed!)

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!

Top comments (0)