What Are the Best Tools to Generate Mermaid Diagrams from Code?

Feb 25, 2026

Purpose

When I needed to document my codebase architecture, I wanted to auto-generate diagrams from code instead of drawing them manually. I found several approaches that actually work. This post shows you the tools I tested and what I learned about each one.

The Problem

Manually creating system architecture diagrams is time-consuming. As code evolves, documentation becomes stale. I needed automated solutions that could analyze code structure and generate visual representations without manual diagramming.

I asked on r/programming about auto-generating system architecture diagrams, and I got several recommendations. I tested each approach to see what works best for different scenarios.

Mermaid MCP with Claude Code

I use Claude Code daily, so I tried the Mermaid MCP server first. It gives Claude Code access to generate Mermaid diagrams directly.

Setup is straightforward:

npm install -g @modelcontextprotocol/server-mermaid

Then configure it in Claude Code settings:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-mermaid"]
    }
  }
}

Now I can ask Claude Code to analyze code and create diagrams. For example, I gave it an Express.js middleware chain and asked for a flowchart:

graph TD
    A[Incoming Request] --> B[authMiddleware]
    B --> C{Authenticated?}
    C -->|No| D[401 Unauthorized]
    C -->|Yes| E[validateRequest]
    E --> F[routeHandler]
    F --> G[Response]

What I like: Claude understands context. It knows which parts of the code matter for the diagram. When I asked it to show middleware execution order, it included the auth check logic without me specifying that.

What could be better: You need Claude Code. If you don’t use it, this approach doesn’t help.

visual-explainer

Someone recommended visual-explainer, an open-source tool that scans your codebase and generates architecture diagrams automatically.

I cloned and ran it:

git clone https://github.com/nicobailon/visual-explainer.git
cd visual-explainer
npm install
npm start --path /path/to/your/codebase

It outputs a markdown file with Mermaid code showing the project structure. It maps directories, key files, and dependencies.

What I like: It’s deterministic. Run it twice on the same codebase, you get the same diagram. No AI hallucinations. It’s also open-source and self-hosted, which matters for some teams.

What could be better: It shows structure but not logic. You see that auth.ts calls db.ts, but not how authentication works. For deeper insights, you still need to read the code.

Opus 4.6 for Diagram Generation

A commenter said “Get Opus 4.6 to draw diagrams in ASCII honestly very good.” I tried it with a Python FastAPI backend.

I pasted my code and asked Opus to generate:

Analyze this Python FastAPI backend and generate:
1. A Mermaid sequence diagram showing authentication flow
2. A Mermaid class diagram showing data model relationships
3. A Mermaid graph showing service dependencies

Code:
[paste code here]

Opus produced accurate Mermaid syntax for all three diagrams. The sequence diagram correctly showed the JWT validation flow, including database calls and error handling paths. The class diagram captured relationships between User, Post, and Comment models.

What I like: Opus understands complex relationships better than I expected. It identified that Comment has a foreign key to both User and Post, which shows up correctly in the diagram.

What could be better: You get what you ask for. If you don’t specify what type of diagram you want, Opus might generate something different each time.

Figma MCP for Collaborative Editing

I work with a team that uses FigJam for whiteboarding. The Figma MCP server lets me generate diagrams directly in FigJam.

Configuration:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-figma", "--figma-token", process.env.FIGMA_TOKEN]
    }
  }
}

Then I asked: “Create a FigJam diagram showing this React component hierarchy.”

The diagram appeared in FigJam, not as Mermaid code but as editable shapes. My teammates could move boxes around, add notes, and refactor the layout.

What I like: Collaboration. Diagrams aren’t static artifacts. Team members can iterate on them after I generate the initial version.

What could be better: Setup requires a Figma token and account. If your team doesn’t use Figma/FigJam, this adds unnecessary friction.

gitnexus for Version-Controlled Diagrams

I also tried gitnexus, which generates deterministic architecture diagrams tied to your git history. It maps commits to diagram states, so you can see how architecture evolved over time.

Setup is more involved, requiring database configuration and git history analysis. Once running, it produces reproducible Mermaid diagrams for any commit.

What I like: Version control. You can regenerate the exact diagram for commit abc123 months later. Useful for architecture review processes.

What could be better: Complexity. Setup took me an hour. Overkill for small projects or quick documentation tasks.

Tool Comparison

After testing all five approaches, here’s how they compare:

Tool	Setup Complexity	AI-Powered	Editable Output	Best For
Mermaid MCP	Low	Yes (Claude)	Yes (Mermaid)	AI-assisted generation
visual-explainer	Medium	No	Yes (Mermaid)	Complete codebase scans
Opus 4.6	Low	Yes (Advanced)	Yes (Mermaid/ASCII)	High-quality outputs
Figma MCP	Medium	Yes (Claude)	Yes (FigJam)	Team collaboration
gitnexus	High	No	Yes (Mermaid)	Version-controlled docs

Which Tool Should You Use?

Based on my testing:

Choose Mermaid MCP with Claude Code if:

You already use Claude Code
You want AI-powered context awareness
You need quick, iterative diagram generation

This is what I use most often. It integrates into my workflow without extra steps.

Choose visual-explainer if:

You want open-source and self-hosted
You need complete codebase visualization
You prefer deterministic outputs over AI

Good for generating baseline documentation, then refining manually.

Choose Opus 4.6 if:

You want highest-quality diagram generation
You need complex relationship mapping
You have minimal time for manual editing

The advanced reasoning makes a difference with tangled legacy codebases.

Choose Figma MCP if:

Your team uses FigJam or Figma
Collaborative editing matters
You need to present and refine diagrams with stakeholders

The FigJam integration changes how teams interact with documentation.

Choose gitnexus if:

You need version-controlled diagrams
Reproducibility is critical
You want to track architecture evolution over time

Overkill for most projects, but invaluable for regulated industries or long-lived systems.

Why This Matters

I saved hours by not drawing diagrams manually. More importantly, my diagrams stay accurate. When code changes, I regenerate the diagram in seconds.

Team onboarding improved too. New contributors can see architecture visually before diving into code. Code reviews are faster when reviewers see the structural impact of changes.

Summary

In this post, I compared five tools for generating Mermaid diagrams from code. The key point is that no single tool is best for every situation. Start with Mermaid MCP if you use Claude Code. Try visual-explainer for automated scanning. Use Opus 4.6 for complex diagrams. Choose Figma MCP for team collaboration. Consider gitnexus when version control matters.

The best tool is the one that fits your workflow and team culture.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!