Can it generate diagrams from existing code or specs?

Yes, it is specifically designed to transform API flows, data models, and infrastructure documentation into visual representations.

Does this skill support standard Mermaid syntax?

Yes, it supports both standard Mermaid syntax for sequence and ER diagrams, as well as specialized C4 Model syntax which omits the mermaid keyword for compatibility.

How do I verify the diagrams render correctly?

The skill includes a mandatory rendering test checklist to ensure all generated .mmd files are compatible with VS Code Mermaid preview extensions.

Where are the diagrams saved in a SpecWeave project?

Diagrams are organized by level: High-Level Designs (HLD) go in architecture/diagrams/ while Low-Level Designs (LLD) are stored in module-specific subdirectories.

Diagrams Architect

Name: Diagrams Architect
Author: anton-abyzov

byanton-abyzov

•

Learning & Documentation

Generates professional Mermaid diagrams using the C4 Model and SpecWeave standards for system architecture and technical documentation.

The Diagrams Architect skill empowers developers to visualize complex system architectures directly within the SpecWeave framework. By adhering to C4 Model conventions (Context, Container, Component, and Code), it creates structured Mermaid diagrams that are both human-readable and machine-renderable. It automates the creation of high-level design (HLD) and low-level design (LLD) visualizations, including sequence flows, ER diagrams, and deployment maps, ensuring that project documentation remains synchronized with implementation and adheres to strict syntax validation rules.

Key Features

01Automated Mermaid syntax validation and specialized C4 keyword handling

02Complex Sequence Diagram generation for API flows and logic use cases

03Entity Relationship (ER) modeling from data structures and infrastructure

0413 GitHub stars

05C4 Model Architecture visualization (Context, Container, Component, Code levels)

06SpecWeave directory convention alignment for HLD and LLD organization

Use Cases

01Mapping microservices architecture and external system boundaries

02Designing database schemas and data models using ER diagrams

03Documenting complex API interaction flows between services and databases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anton-abyzov/specweave diagrams-architect

For use in Claude.ai and ChatGPT

Download Skill