skills.rest
serguei9090
serguei9090COMMUNITY
Explore all skills by this author →
GitHub

diagram-creator

Generates C4-compliant Mermaid.js architecture diagrams from codebase structural analysis.

Updated Mar 22, 2026
Search Tags:#documentation#data flow#system design#mermaid#visualization#c4 model#architecture diagram
One-click install
npx skills add https://github.com/serguei9090/LogLensAi --skill diagram-creator-serguei9090
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-creator
Source: https://github.com/serguei9090/LogLensAi/tree/main/.agents/skills/diagram-creator
Command: npx skills add https://github.com/serguei9090/LogLensAi --skill diagram-creator-serguei9090

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating a complex codebase into clear visual architecture documentation is time-consuming and often inconsistent. This Skill automates the creation of standardized C4-model Mermaid.js diagrams so system structure and data flow stay documented and up to date. ## Core Features & Use Cases - C4 Zoom Levels: Produces Context, Container, and Component-level diagrams depending on the requested scope. - Structural Scan Protocol: Locates entry points, state layers, and external dependencies before drawing to ensure diagrams reflect the real system. - Standardized Notation: Enforces top-down flow, labeled arrows, subgraph grouping, and consistent shapes for databases, APIs, actors, and processes. - Use Case: After refactoring a backend service, ask for an updated container diagram and receive a Mermaid.js graph plus a data flow summary and risk assessment. ## Quick Start Visualize the system architecture of this repository as a C4 container-level Mermaid diagram.

Frequently Asked Questions about diagram-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Mermaid.js architecture diagram from my codebase?▼

Request a visualization of the target system and the skill performs a structural scan of entry points, state layers, and external dependencies, then outputs a Mermaid.js graph using C4 notation with labeled arrows and grouped subgraphs.

What C4 diagram levels does this skill support?▼

It supports three zoom levels: Level 1 Context for system boundaries and external dependencies, Level 2 Container for tech stacks and deployable units, and Level 3 Component for internal logic, module relationships, and ERDs.

What Mermaid syntax conventions does the diagram output follow?▼

Diagrams use top-down graph TD flow, subgraphs for logical clusters, and labeled arrows for every connection. Shapes are standardized: cylinders for databases, hexagons for external APIs, rounded shapes for actors, rectangles for services, and diamonds for decisions.

Does the diagram output include anything besides the Mermaid graph?▼

Yes. Every diagram includes a one-sentence data flow summary describing the request path and a risk assessment identifying one potential architectural bottleneck or risk in the system.

When should I use C4 diagrams instead of freeform flowcharts?▼

Use C4 diagrams when documenting software architecture for teams, since the fixed zoom levels keep abstraction consistent. Freeform flowcharts suit ad-hoc process sketches but lack the structural rigor needed for architecture parity.

Related Skills

Explore More Software Engineering Skills→
blueraaiblueraai

Suggest Dependencies to Index

Parse manifest files and source imports to rank dependencies for indexing.

Official
Intermediate
ancolemanancoleman
503

generating-documentation

Generate OpenAPI specifications, code documentation, and system diagrams.

Community
Advanced
I-SynergyI-Synergy

verify-config

Audit CLAUDE.md and .claude/reference files against codebase patterns to detect documentation drift.

Official
Intermediate
HCMUTE-RTICHCMUTE-RTIC

c4-code

Analyze code directories to generate C4 code-level documentation.

Official
Advanced