Technical diagrams

stacks-technical-diagrams · Design · model-invoked

Architecture, workflow, sequence, data flow and lifecycle diagrams. The largest skill in the set by supporting files, with three dozen reference documents behind one SKILL.md, which is progressive disclosure doing its job.

Inside the skill

The sections an agent reads once the skill loads.

• Attribution
• Dependency-free contract
• Stacks repository workflow
• Choosing a Diagram Type
• Mermaid as an Input Dialect
• Layout principles (read before placing)
• Renderer Modes (architecture / workflow / sequence / dataflow / lifecycle)
• Architecture Mode
• Output

Supporting files

Reference and scripts the skill reaches for on demand, rather than loading up front.

• LICENSE
• agents/openai.yaml
• assets/template.html
• bin/technical-diagrams.mjs
• bunfig.toml
• examples/agent-run.lifecycle.json
• examples/agent-tool-call.workflow.json
• examples/cache-miss-request.sequence.json
• examples/product-analytics.dataflow.json
• examples/web-app.architecture.json
• renderers/architecture
• renderers/dataflow
• renderers/lifecycle
• renderers/sequence
• renderers/shared
• renderers/workflow
• schemas/README.md
• schemas/architecture.schema.json
• schemas/common.schema.json
• schemas/dataflow.schema.json
• schemas/lifecycle.schema.json
• schemas/sequence.schema.json
• schemas/workflow.schema.json
• scripts/check-render-output.mjs
• scripts/render-examples.mjs

Related skills

• Actions
• Cloud
• Database
• Events
• Jobs
• Models
• Realtime
• Router

Using it

This one is model-invoked. Your agent reaches for it on its own when the task matches, and you can also call it by name:

/stacks-technical-diagrams

Source: stacks-technical-diagrams/SKILL.md. Shadow it for one project with app/Skills/stacks-technical-diagrams/SKILL.md, then re-run buddy setup:ai. See Writing your own.