Code To Mermaid Diagrams

Problem It Addresses

When control flow, state transitions, API calls, or entity relationships are spread across multiple files, engineers often have to trace call order, branching logic, and data structures by hand. code2diagram targets this scenario: it reads a directory or file, identifies dominant logic patterns, and produces diagram artifacts that can be reviewed, not just described verbally.

How It Works

The core output consists of two files:

• Markdown document: contains Mermaid source that can be previewed in Mermaid-capable editors or GitHub.
• PNG image: a high-resolution rendered result suitable for documentation, comments, or screenshots.

The workflow has roughly four steps: first use Read, Glob, and Grep to understand the code structure; then choose a diagram type based on the pattern, such as stateDiagram-v2 for state machines, sequenceDiagram for message flow, and erDiagram for entity relationships. Next it generates Mermaid source, writes it to a .mmd file, and invokes a rendering script to produce the image.

Boundaries

Diagram labels are expected to use Chinese, while identifiers such as class names, function names, and variable names remain in the original text. It depends on Node.js and npx, and the script attempts to use mermaid-cli; for complex codebases, the abstraction level still needs human review instead of mechanically mapping every detail into one diagram.