arc-diagrams_skill

Overview

This skill generates Arc-compatible architecture diagram configs in JSON or TypeScript-ready form. It produces fully specified layout, node positions, node metadata, connectors, and connector styles so the output can be rendered directly in Arc or a React app using Arc's renderer.

How this skill works

Provide a description of the system or ask to create a diagram and I produce an ArcDiagramData JSON object. I choose canvas size, place nodes with x/y coordinates and sizes, assign icons, names and colors, and define connectors with anchors and styles. The output includes connector style definitions and a short explanation of the architecture and suggested file usage.

When to use it

• When you ask to create, draw, or visualize an architecture or system diagram
• When you need a declarative diagram config to render in Arc or a React app
• When you want a shareable .arc.json / TypeScript export for documentation
• When you need a starting diagram to iterate on in a visual editor
• When you want consistent node sizing, spacing, and connector styling

Best practices

• Use a 50px grid and align nodes to keep layouts tidy
• Keep 150–200px horizontal spacing between connected nodes for clarity
• Choose flow direction (left-to-right or top-to-bottom) before placing nodes
• Group related components close together and use large nodes for primary entry points
• Match connector colors to the source or destination to improve readability

Example use cases

• Generate a web app diagram (client → API → cache → database) for README or docs
• Model microservice interactions with labeled HTTP and async connectors
• Visualize network boundary and security components (load balancer, firewall, services)
• Produce a TypeScript export for embedding a diagram in a React storybook
• Create an exportable .arc.json to hand off to a designer for refinement