docs-diagrams

Generate Mermaid diagrams from project structure and deployment architecture.

1|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/ReefBytes/Manifest --skill docs-diagrams
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: docs-diagrams
Source: https://github.com/ReefBytes/Manifest/tree/main/configs/claude/skills/docs-diagrams
Command: npx skills add https://github.com/ReefBytes/Manifest --skill docs-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate and maintain Mermaid diagrams that reflect current system structure, workflows, and integrations, saving time and reducing documentation drift.

Core Features & Use Cases

  • Automated generation of Application Architecture diagrams (Flowchart) from code and config.
  • Integration Flow and Component Architecture diagrams to illustrate provider/adapter patterns.
  • Deployment/Output Flow diagrams to visualize data paths and deployment steps.
  • Use Case: When architecture changes, regenerate diagrams to keep docs aligned with codebase.

Quick Start

Generate up-to-date Mermaid diagrams for the current project with a single command.

Frequently Asked Questions about docs-diagrams

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

FAQPage Schema
How do I auto-generate Mermaid diagrams from my codebase to document system architecture?

To auto-generate Mermaid diagrams for system architecture, you can parse your project structure to extract entry points and provider/adapter patterns. This produces valid Mermaid diagrams reflecting application, integration, and deployment flows suitable for GitHub and GitLab rendering.

What is the best way to maintain visual documentation when architecture changes?

The best way to maintain visual documentation when architecture changes is to regenerate Mermaid diagrams from the updated codebase. This reduces documentation drift by automatically aligning application architecture and integration flow visuals with the current code.

Can I generate deployment and integration flow diagrams for provider and adapter patterns?

Yes, you can generate deployment and integration flow diagrams for provider and adapter patterns. Parsing the project structure identifies these relationships and outputs valid Mermaid flowcharts visualizing component architecture and data paths.

Does this diagram generation approach work with GitHub and GitLab rendering?

Yes, this diagram generation approach works with GitHub and GitLab rendering. It outputs valid Mermaid syntax directly compatible with these platforms, allowing you to embed application architecture and deployment flow diagrams seamlessly into your markdown documentation.

How do I visualize deployment steps and data paths from my existing project config?

You can visualize deployment steps and data paths from existing project config by analyzing the codebase to identify essential system components. This generates deployment/output flow diagrams that map out the current deployment architecture and data paths.

Why do manually maintained architecture diagrams suffer from documentation drift?

Manually maintained architecture diagrams suffer from documentation drift because they require manual updates whenever the codebase changes. Automatically generating Mermaid diagrams from project structure ensures integration and deployment visuals stay continuously aligned with the actual code.