DEV Community

Pradumya Mukati
Pradumya Mukati

Posted on

I Built a Mermaid Diagram Editor That Makes AI-Generated Diagrams Actually Usable

#devchallenge #weekendchallenge #ai #webdev

I Built a Mermaid Diagram Editor That Makes AI-Generated Diagrams Actually Usable

Most AI assistants can generate Mermaid diagrams.

The problem starts when you actually try to use them.

You copy the code, paste it into an editor, fix syntax errors, tweak layouts, export an image, then repeat the process again after every AI prompt.

I wanted a faster workflow.

So I built Mermaid Diagrams Live — a browser-based editor where you can write, edit, preview, and export Mermaid diagrams instantly.

Live Demo: https://www.mermaiddiagrams.live/

Why I Built It

I use Mermaid for:

  • System design
  • API architecture
  • Database ER diagrams
  • Flowcharts
  • Sequence diagrams
  • Git workflows

Existing editors worked, but I wanted something lightweight that opens instantly and focuses on writing diagrams instead of navigating a complex interface.

Features

  • Live preview while typing
  • Supports Flowcharts
  • Sequence Diagrams
  • Class Diagrams
  • ER Diagrams
  • State Diagrams
  • Journey Diagrams
  • Mind Maps
  • Timeline Diagrams
  • Pie Charts
  • Git Graphs
  • Export diagrams as PNG and SVG
  • Works directly in the browser
  • No account required

Built For AI Workflows

One thing I noticed is that developers increasingly generate Mermaid code using ChatGPT, Claude, Gemini, or GitHub Copilot.

Instead of manually fixing formatting every time, the workflow becomes:

  1. Generate Mermaid code with AI.
  2. Paste it into Mermaid Diagrams Live.
  3. Preview instantly.
  4. Edit visually by changing the source.
  5. Export the final diagram.

This makes documentation much faster.

Use Cases

  • Software architecture
  • Technical documentation
  • README files
  • API documentation
  • Database design
  • Project planning
  • DevOps documentation
  • Engineering blogs

Tech Stack

  • HTML
  • CSS
  • JavaScript
  • Mermaid.js

Keeping the stack simple helped the editor stay fast and responsive.

What's Next

I'm currently working on features like:

  • AI-assisted diagram generation
  • Better theme support
  • Shareable diagram links
  • Auto-save
  • More export options

If you use Mermaid regularly, I'd love your feedback.

👉 https://www.mermaiddiagrams.live/

What feature would make your Mermaid workflow faster?

Top comments (0)