design-doc-mermaid

Generates Mermaid sequence, activity, and architecture diagrams from natural language descriptions or source code.

5|Updated Mar 11, 2026
One-click install
npx skills add https://github.com/SteveFeldman/agents-skills --skill design-doc-mermaid-stevefeldman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-doc-mermaid
Source: https://github.com/SteveFeldman/agents-skills/tree/main/skills/mermaid
Command: npx skills add https://github.com/SteveFeldman/agents-skills --skill design-doc-mermaid-stevefeldman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mermaid-cli, and includes scripts (resource) and references (resource) and assets (resource) and examples (resource) components.

What problem does it solve?

This Skill automates the creation of Mermaid diagrams from natural language descriptions or source code, eliminating the need for manual diagramming and ensuring consistency.

Core Features & Use Cases

  • Diagram Generation: Create various diagram types (sequence, activity, class, ER, etc.) from text prompts.
  • Code-to-Diagram: Analyze code structure (e.g., Spring Boot, FastAPI) to generate architecture, sequence, and activity diagrams.
  • Use Case: Describe a user login flow, and the Skill generates a sequence diagram. Provide a Spring Boot controller class, and it generates an architecture diagram showing its dependencies.

Quick Start

Create an activity diagram for user registration with email verification.

Frequently Asked Questions about design-doc-mermaid

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

FAQPage Schema
How do I generate Mermaid diagrams from source code automatically?

To generate Mermaid diagrams from text, this Skill parses natural language descriptions or code to produce sequence, activity, class, ER, and architecture diagrams. It automates the documentation of system architecture, API flows, and business logic without manual diagramming.

Can I create a sequence diagram from a natural language description?

You can generate sequence diagrams by providing natural language descriptions of user flows or code snippets. The Skill parses text inputs, such as login process descriptions, and outputs corresponding Mermaid sequence diagram syntax to visualize interactions.

Do I need to install mermaid-cli to convert diagrams into images?

Yes, you need mermaid-cli installed to render Mermaid syntax into image files. The Skill uses Python utilities for diagram extraction and validation, then relies on mermaid-cli to convert the generated text-based diagrams into image outputs.

What types of diagrams can I generate for documenting system architecture?

You can generate sequence, activity, class, ER, and architecture diagrams for documenting system architecture. The Skill parses natural language descriptions or code structures like Spring Boot controllers to output architecture diagrams showing dependencies.

What is the best way to document API flows using Mermaid?

The best way to document API flows using Mermaid is to parse source code from frameworks like Spring Boot or FastAPI to generate sequence and activity diagrams. This approach ensures architecture and business logic documentation matches the actual codebase.

Does this approach work with Python utilities for diagram validation?

Yes, this Skill integrates with Python utilities for diagram extraction, validation, and image conversion. It uses Python scripts to validate the generated Mermaid syntax and automate the rendering process into image files.