Mermaid Diagrams

What is Mermaid?

Mermaid is a text-based diagramming language. Instead of dragging shapes around in a visual tool, you write a short description of the diagram and Mermaid renders it as a visual graphic. It's designed to live alongside code — inside Markdown files, wikis, or documentation — so your diagrams stay version-controlled and easy to update.

Mermaid supports many diagram types:

• Flowcharts — decision trees and process flows
• Sequence diagrams — how systems or services call each other over time
• Entity-relationship (ER) diagrams — database schemas
• Architecture diagrams — components and their relationships
• Gantt charts — timelines and project schedules

Live Diagram Rendering

Open any .md file in the IDE Strip that contains a Mermaid code block. A Mermaid block looks like this:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

When the IDE Strip detects a Mermaid block, it renders a visual diagram panel alongside the source. You see both at the same time: the text description on the left and the rendered diagram on the right. Edit the text and the diagram updates immediately — no save-and-reload step required.

Interactive Editing

This is where 1DevTool's Mermaid support goes beyond a standard renderer. You can drag nodes in the visual diagram, and the source code updates automatically to reflect the new layout. This works in both directions:

• Edit text → diagram updates — change a label or add a new connection in the source and see the diagram redraw.
• Drag node → source updates — move a node in the visual diagram and the corresponding position data in the source code adjusts to match.

You can also resize nodes and reconnect edges by dragging from one node's edge to another. The source stays in sync throughout.

This makes Mermaid diagrams feel much less like a "write it and hope for the best" experience. You can get the structure roughly right in text, then fine-tune the layout visually.

Use with AI Agents

One of the most powerful combinations in 1DevTool is asking an AI agent to generate a Mermaid diagram and then visually rearranging the result. For example, open a Claude Code terminal and ask:

"Generate a Mermaid diagram showing how the main components in this codebase interact with each other."

The agent reads your codebase and writes a .md file containing a Mermaid diagram. Open that file in the IDE Strip, and the diagram renders visually. If the layout is hard to read, drag the nodes into a clearer arrangement. The source updates automatically, so you can commit the improved diagram.

This also works well for database schemas, API call sequences, and deployment architecture diagrams.

Tip: Ask Claude Code: "Draw a Mermaid diagram showing how the components in this repo interact." Then open the generated .md file to see and rearrange the diagram visually.