home / skills / openclaw / skills / diagram-gen

diagram-gen skill

safe

This skill generates up-to-date Mermaid diagrams from your codebase, helping you visualize architecture for onboarding, documentation, and design reviews.

npx playbooks add skill openclaw/skills --skill diagram-gen

Review the files below or copy the command above to add this skill to your agents.

Files (12)

SKILL.md

2.1 KB

---
name: diagram-gen
description: Generate Mermaid diagrams from your codebase. Use when you need architecture visualizations.
---

# Diagram Generator

Architecture diagrams are always out of date because nobody maintains them. This tool reads your code and generates accurate Mermaid diagrams automatically.

**One command. Zero config. Just works.**

## Quick Start

```bash
npx ai-diagram ./src/
```

## What It Does

- Generates Mermaid diagrams from your code
- Supports flowcharts, class diagrams, sequence diagrams
- Creates ER diagrams from database schemas
- Outputs markdown-compatible Mermaid syntax

## Usage Examples

```bash
# Generate flowchart
npx ai-diagram ./src/

# Class diagram
npx ai-diagram ./src/ --type class -o architecture.mmd

# Sequence diagram of function calls
npx ai-diagram ./src/ --type sequence

# Entity relationship diagram
npx ai-diagram ./src/ --type er
```

## Best Practices

- **Pick the right diagram type** - use class for OOP, flow for processes
- **Focus on key modules** - don't diagram everything
- **Keep them updated** - run periodically as code changes
- **Add to docs** - Mermaid renders in GitHub markdown

## When to Use This

- Onboarding new team members
- Documentation that's always out of date
- Understanding unfamiliar codebases
- Architecture reviews and planning

## Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

**Find more:**
- GitHub: https://github.com/LXGIC-Studios
- Twitter: https://x.com/lxgicstudios
- Substack: https://lxgicstudios.substack.com
- Website: https://lxgicstudios.com

## Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

```bash
npx ai-diagram --help
```

## How It Works

Reads your source files to understand the structure, relationships, and data flow. Then generates Mermaid syntax that renders as diagrams in markdown editors, GitHub, and documentation tools.

## License

MIT. Free forever. Use it however you want.

Overview

This skill generates accurate Mermaid diagrams directly from your codebase so architecture visuals stay in sync with the source. It supports multiple diagram types and outputs markdown-compatible Mermaid syntax for easy embedding. Run a single command with no config required to produce flowcharts, class diagrams, sequence diagrams, or ER diagrams.

How this skill works

The tool scans source files to infer modules, classes, functions, call relationships, and database schemas. It translates that structural and data-flow information into Mermaid notation and writes output that renders in markdown viewers and documentation systems. You can request specific diagram types and save output to files for inclusion in docs.

When to use it

Onboarding new developers who need a quick architecture overview
Refreshing documentation that often falls out of date
Exploring an unfamiliar or archived codebase
Preparing visuals for architecture reviews or design discussions
Extracting ER diagrams from database schema definitions

Best practices

Pick the diagram type that matches the goal: class for OOP, flow for processes, sequence for call flows, ER for schemas
Limit scope to key modules or subsystems to keep diagrams readable
Run the generator regularly or integrate into CI to keep visuals current
Commit generated Mermaid files into docs so they render natively on platforms like GitHub
Review and optionally annotate generated diagrams to highlight design decisions

Example use cases

Generate a class diagram for a backend service to document domain objects and relationships
Produce a flowchart showing main request handling paths across modules
Create a sequence diagram to visualize interactions for a critical feature or endpoint
Extract an ER diagram from schema files to share with database and product teams
Batch-generate architecture visuals for multiple repositories during an audit or migration

FAQ

Do I need to configure anything before running it?

No configuration is required for basic use. Run the command against a source directory and it will generate diagrams automatically.

Which languages and diagram types are supported?

It supports common languages and generates flowcharts, class diagrams, sequence diagrams, and ER diagrams; support may vary by language for deeper analysis.