gendoc-gen-diagrams

Generate server and frontend UML diagrams from project documentation using Mermaid syntax.

Updated Apr 22, 2026

Search Tags:#automation #architecture #documentation #mermaid #diagram #uml

Ready to run

npx skills add https://github.com/ibalasite/gendoc --skill gendoc-gen-diagrams

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gendoc-gen-diagrams
Source: https://github.com/ibalasite/gendoc/tree/main/skills/gendoc-gen-diagrams
Command: npx skills add https://github.com/ibalasite/gendoc --skill gendoc-gen-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagram generation for complex software projects is tedious and error-prone; this skill automates the extraction and rendering of UML diagrams from project documentation, ensuring consistency across server and frontend models.

Core Features & Use Cases

Generate server UML diagrams (Use Case, Class Domain, Class Application, Class Infra/Presentation, Object, Sequence, Communication, State Machine, Activity, Component, Deployment) from EDD/ARCH/API/PRD/PDD/VDD/docs using Mermaid syntax.
Generate frontend UML diagrams from FRONTEND.md/PDD.md/VDD.md and related docs, including use-case/class/object/sequence/state/activity/component/deployment/communication diagrams.
Output diagrams to docs/diagrams/ and produce class-inventory.md (class→test file mapping) for test planning.

Quick Start

Run gendoc-gen-diagrams from the repository root to generate all server and frontend diagrams.

Frequently Asked Questions about gendoc-gen-diagrams

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

FAQPage Schema

How do I auto-generate UML diagrams from project documentation?▼

You can auto-generate UML diagrams from project documentation by running a tool that parses EDD.md, ARCH.md, API.md, and FRONTEND.md files to output Mermaid syntax diagrams. It extracts architecture and design details to render server and frontend models automatically.

What's the best way to automate Mermaid diagram creation for server and frontend architecture?▼

Automating Mermaid diagram creation for server and frontend architecture is best handled by a documentation parser that outputs nine server and sixteen frontend UML diagrams. It processes PRD.md, PDD.md, and VDD.md files to generate use-case, class, and sequence diagrams directly.

Do I need specific documentation files to generate UML class and sequence diagrams?▼

Yes, you need specific documentation files like EDD.md, ARCH.md, API.md, PRD.md, PDD.md, VDD.md, and FRONTEND.md to generate UML class and sequence diagrams. These source files provide the required architectural and functional context for server and frontend diagram extraction.

Can I map generated UML diagrams to test files for my software project?▼

Yes, you can map generated UML diagrams to test files by producing a class-inventory.md file. This inventory maps each diagram class to its corresponding test file, enabling structured test planning directly from the generated server and frontend documentation outputs.

What types of frontend UML diagrams can I generate from documentation?▼

You can generate sixteen frontend UML diagrams from documentation, including use-case, class, object, sequence, state, activity, component, deployment, and communication diagrams. These are extracted from FRONTEND.md and related docs using Mermaid syntax.

Where are the generated Mermaid UML diagrams stored after extraction?▼

Generated Mermaid UML diagrams are stored in the docs/diagrams directory after extraction. Running the generation process from the repository root outputs all server and frontend diagrams to this specific folder for centralized architecture documentation access.