diagram-creator

Generate C4-compliant Mermaid.js diagrams of system architecture.

Updated Jan 10, 2026
One-click install
npx skills add https://github.com/serguei9090/Agentic-Governance-Framework --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/Agentic-Governance-Framework/tree/main/MasterPrompts/.agents/skills/diagram-creator
Command: npx skills add https://github.com/serguei9090/Agentic-Governance-Framework --skill diagram-creator-serguei9090

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Complex codebases are hard to understand and collaborate on; this skill generates standardized diagrams that reveal system structure, dependencies, and data flows to accelerate design and review.

Core Features & Use Cases

  • Top-down visualization using Mermaid.js inspired by the C4 model, enabling context, container, and component views.
  • Automatic logical grouping of elements into subgraphs (Client_Side, Backend_Service, Persistence) for clarity.
  • Explicit labeling of all connections to ensure unambiguous data flow and interaction tracing.
  • Structural analysis guidance to identify entry points, state layers, and external bonds for accurate diagram grounding.
  • Deliverables include a ready-to-render diagram plus a concise data-flow summary and risk assessment.

Quick Start

Provide the target system details and run the AVAS workflow to generate a 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 C4 architecture diagrams for a complex codebase?

You can generate C4 architecture diagrams by providing target system details to run the workflow, which produces Mermaid.js visualizations with hierarchical grouping, explicit connection labels, and a concise data-flow summary.

Can I visualize system context, containers, and components using Mermaid.js?

Yes, you can visualize system context, containers, and components using Mermaid.js. The output applies top-down C4-inspired grouping into subgraphs like Client_Side, Backend_Service, and Persistence for clear architectural views.

What is the best way to map data flows and dependencies across development teams?

Mapping data flows and dependencies across teams is achieved by generating standardized C4-compliant diagrams with strict connection labeling, ensuring unambiguous interaction tracing and accelerating design reviews.

Do I need to manually identify entry points and external bonds before creating a system diagram?

No, manual identification is unnecessary. The process includes structural analysis guidance to automatically identify entry points, state layers, and external bonds, grounding the generated Mermaid.js diagram accurately.

What limitations exist when using Mermaid.js for C4 component visualization?

Mermaid.js C4 visualization limitations involve strict labeling and hierarchical grouping constraints. While it effectively renders context, containers, and components, complex topologies may require concise data-flow summaries to maintain clarity.

Does the diagram generation provide any risk assessment alongside the architecture visualization?

Yes, the diagram generation provides a risk assessment. Deliverables include a ready-to-render Mermaid.js diagram alongside a concise data-flow summary and an evaluation of potential architectural risks.