diagrams

What This Skill Does

The Diagrams skill is a specialized OpenClaw tool designed to bridge the gap between abstract architectural concepts and concrete visual documentation. By leveraging the ELK (Eclipse Layout Kernel) JSON format, the skill allows you to define complex system architectures, workflow logic, and organizational hierarchies as structured data. Once defined, the skill automates the rendering process, converting your JSON models into crisp, professional-grade SVG files. This ensures your technical documentation is not only precise but also programmatically generated, making it significantly easier to maintain as your systems evolve. The skill includes built-in support for semantic coloring, nested containers, and custom label styling to ensure your diagrams are both legible and visually consistent.

Installation

To integrate this skill into your workflow, run the following command from your terminal: clawhub install openclaw/skills/skills/brennerspear/diagrams. After installation, ensure you have initialized your local project environment by running npm init -y and installing the required dependency with npm install elkjs. It is important to set "type": "module" in your project's package.json file to ensure the rendering script runs correctly within the Node.js runtime. Once configured, you can point the renderer at your JSON files to produce high-quality diagrams that can be immediately embedded into your Markdown documentation.

Use Cases

This skill is indispensable for technical teams, software architects, and project managers. Common use cases include: mapping microservices interaction topologies, documenting complex user onboarding flows, creating visual representations of database schema relationships, illustrating deployment pipelines, and outlining decision trees for business logic. By treating your diagrams as code, you enable version control over your documentation, allowing for diffs and history tracking that static image editors cannot provide.

Example Prompts

1. "OpenClaw, generate a flow diagram for our user signup process using the ELK schema, showing the step-by-step API calls from the client to our Auth service and finally the DB."
2. "Please create an architecture diagram mapping our containerized microservices; use the 'core' color for the main API gateway and differentiate internal services as nested nodes."
3. "I need a visual decision map for our incident response workflow. Generate an SVG diagram with dashed lines for secondary fallback paths and add labels for each branch condition."

Tips & Limitations

The Diagrams skill relies on the ELK engine for automatic layout calculation. While this removes the need for manual node positioning, complex, overly crowded diagrams can sometimes result in overlapping labels. To mitigate this, consider breaking large diagrams into smaller, modular components. Use the containerColor and children properties to group related nodes logically. Always remember that the rendering script requires an environment with sips access if you intend to convert SVGs to PNG formats on macOS. Finally, leverage the custom color palette to maintain a professional look that adheres to your documentation's style guide.