diagrams-architect

What This Skill Does

The Diagrams Architect skill is an advanced OpenClaw agent capability designed to formalize system visualization within SpecWeave projects. It bridges the gap between complex architectural documentation and visual representation by automating the creation of standardized Mermaid diagrams. The skill strictly enforces the C4 Model (Context, Container, Component, Code) to ensure consistency, clarity, and scalability across the development lifecycle. By utilizing this skill, developers can maintain an up-to-date visual record of system components, data flows, and infrastructure, ensuring that architectural intent is always synced with the codebase.

Installation

To integrate this skill into your environment, use the OpenClaw hub command: clawhub install openclaw/skills/skills/anton-abyzov/sw-diagrams-architect

Use Cases

• System Context Planning: Defining high-level interactions between your system and external actors or services using C4 Context diagrams.
• Container & Component Mapping: Breaking down microservices or modules into containers and internal components for detailed low-level documentation.
• API Flow Visualization: Generating sequence diagrams directly from documented API endpoints to visualize complex request-response cycles.
• Data Modeling: Designing ER diagrams to represent database schemas and relational integrity.
• Infrastructure Auditing: Creating deployment diagrams to map out server environments, load balancers, and cloud resources.

Example Prompts

1. "Generate a C4 Container diagram for our new payment microservice, highlighting the interaction with the Redis cache and PostgreSQL database."
2. "Create a sequence diagram for the user authentication flow based on the provided API documentation in our specs."
3. "Visualize the current deployment architecture for our production environment, including the Kubernetes clusters and ingress controllers."

Tips & Limitations

• Syntax Strictness: Always remember that C4 diagrams must NOT include the 'mermaid' keyword. The skill will help you validate this, but following the convention manually saves time.
• Pathing: Keep diagrams organized. Store High-Level Designs (HLD) in architecture/diagrams/ and Low-Level Designs (LLD) in module-specific folders like architecture/diagrams/{module}/.
• Rendering: Always use a Mermaid-compatible previewer (like the VS Code Mermaid extension) after generation to ensure your node labels and connections render correctly as SVGs.
• Updates: Architecture diagrams are living documents; treat them as part of your pull request process whenever logic or infrastructure changes significantly.