Generate Mermaid diagrams for system design and architecture visualization.
npx skills add https://github.com/atilladeniz/next-go-pg --skill system-design
Please help me install this Agent Skill. Skill: system-design Source: https://github.com/atilladeniz/next-go-pg/tree/main/.claude/skills/system-design Command: npx skills add https://github.com/atilladeniz/next-go-pg --skill system-design
This Skill simplifies the process of documenting and communicating complex system architectures, data flows, and business logic. By leveraging Mermaid diagrams, it allows you to quickly create clear, text-based visualizations, reducing ambiguity and improving collaboration among team members.
.concepts/ for architecture, flows, and data models.Generate a simple Mermaid flowchart to visualize a decision-making process, for example, "User logs in" -> "Is user authenticated?" -> "Yes: Go to Dashboard" / "No: Show Login Error".
High-intent search queries and answers about installing and using this skill.
Mermaid diagrams visualize system architecture by converting text-based syntax into flowcharts, sequence diagrams, C4 models, and ER diagrams. Write diagram code specifying components, relationships, and flows, then render them as clear visual representations of your system design without requiring external drawing tools.
Mermaid supports C4Context, C4Container, Flowchart, Sequence, ER Diagram, Class Diagram, State Diagram, and Mind Map formats. Each type serves different documentation needs: ER diagrams model database schemas, sequence diagrams show service interactions, flowcharts illustrate decision logic, and C4 diagrams decompose system architecture at multiple abstraction levels.
Yes. Sequence diagrams in Mermaid document API calls and interactions between microservices and components. Generate syntactically correct diagrams that map business requirements into visual flows showing request paths, response handling, and service dependencies across your distributed system.
Save Mermaid diagrams under the `.concepts/` directory in category-specific subfolders—organize by architecture, flows, and data models. This structure keeps documentation discoverable, maintainable, and aligned with your codebase while making business logic and system design reasoning explicit alongside visual representations.
Translate business requirements into Mermaid flowcharts or state diagrams, documenting the logic before generating diagram code. This approach reduces ambiguity, clarifies decision points and edge cases, and creates shared reference material that improves team collaboration during architecture reviews and feature planning.
zzafergokGenerate C4 model diagrams and documentation in Mermaid syntax from codebase analysis.
DavidLam-ossGenerate architectural and product flow diagrams with review checklists.
abudhahirGenerate flowcharts, sequence, class, and ER diagrams from Mermaid syntax.
atanakaConvert UML class diagram images into a machine-readable domain-model.json.