How do I install the Sac Capture Diagrams skill?

Run npx skillmds@latest add spillwavesolutions/sac-capture-diagrams in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Sac Capture Diagrams safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Sac Capture Diagrams?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Sac Capture Diagrams free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Sac Capture Diagrams?

spillwavesolutions (@spillwavesolutions) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Sac Capture Diagrams by spillwavesolutions

Name: Sac Capture Diagrams
Author: spillwavesolutions

Sac Capture Diagrams

Capture wireframes and architecture diagrams into the SAC second brain as OKF concepts with Mermaid or PlantUML listings embedded in Markdown. Covers wireframes (PlantUML salt), architecture, component, sequence, activity, state machine, class, ERD, deployment, C4, and data-flow diagrams. Also use when authoring Module/Class/Method/Function concepts.

File contents

Capture diagrams into the architecture second brain

Diagrams live inside OKF concept Markdown as fenced mermaid or plantuml / puml listings — portable, LLM-readable, and scannable.

Types

Type	Typical format
`Wireframe`	PlantUML `salt`
`ArchitectureDiagram`	Mermaid / PlantUML / C4
`ComponentDiagram`	Mermaid / PlantUML
`SequenceDiagram`	Mermaid `sequenceDiagram`
`ActivityDiagram`	Mermaid flowchart / PlantUML activity
`StateMachineDiagram`	Mermaid `stateDiagram-v2`
`ClassDiagram`	Mermaid `classDiagram`
`ErdDiagram`	Mermaid `erDiagram`
`DeploymentDiagram`	PlantUML deployment
`DataFlowDiagram`	Mermaid flowchart
`C4Diagram`	PlantUML C4 / Mermaid
`Diagram`	Umbrella only when kind unknown

Process

Discover existing diagrams in the repo:

python3 "${CLAUDE_PLUGIN_ROOT}/scripts/sac_scan_diagrams.py" --root . --json

Materialize via full capture (or orchestrate):

python3 "${CLAUDE_PLUGIN_ROOT}/scripts/sac_orchestrate.py" --scan-root . --system "MySystem"
# domains include diagrams + code by default

Author new design diagrams (when designing features/apps):
- Create concept under diagrams/ using the right type.
- Put the listing in a ## Diagram section inside mermaid or plantuml fences.
- Link with visualizes / diagrams / wireframes / models to Service, WebApp, ApiContract, Database, Class, etc.
Code structure (modules / classes / methods / functions):

python3 "${CLAUDE_PLUGIN_ROOT}/scripts/sac_scan_code_structure.py" --root .

Package = build unit (npm/maven/gradle/…)
Module = source module / namespace inside a package
Class / Interface / Enum / Method / Function = code-level concepts for design and blast radius

Rules

Prefer specific diagram types over bare Diagram.
Always keep the diagram source in the Markdown (never only as a PNG link).
One primary listing per concept; extra variants can be additional sections.
After writing, link related topology and run sac_validate.py --schema.
For UI work, use PlantUML salt wireframes linked to WebApp / MobileApp / Channel.

For C4 level views and Structurizr, use skill sac-c4 (docs/c4-integration.md).

---name: sac-capture-diagramsdescription: Capture wireframes and architecture diagrams into the SAC second brain as OKF concepts with Mermaid or PlantUML listings embedded in Markdown. Covers wireframes (PlantUML salt), architecture, component, sequence, activity, state machine, class, ERD, deployment, C4, and data-flow diagrams. Also use when authoring Module/Class/Method/Function concepts.---# Capture diagrams into the architecture second brainDiagrams live **inside** OKF concept Markdown as fenced `mermaid` or `plantuml` /`puml` listings — portable, LLM-readable, and scannable.## Types| Type | Typical format ||------|----------------|| `Wireframe` | PlantUML `salt` || `ArchitectureDiagram` | Mermaid / PlantUML / C4 || `ComponentDiagram` | Mermaid / PlantUML || `SequenceDiagram` | Mermaid `sequenceDiagram` || `ActivityDiagram` | Mermaid flowchart / PlantUML activity || `StateMachineDiagram` | Mermaid `stateDiagram-v2` || `ClassDiagram` | Mermaid `classDiagram` || `ErdDiagram` | Mermaid `erDiagram` || `DeploymentDiagram` | PlantUML deployment || `DataFlowDiagram` | Mermaid flowchart || `C4Diagram` | PlantUML C4 / Mermaid || `Diagram` | Umbrella only when kind unknown |## Process1. **Discover existing diagrams** in the repo:```bashpython3 "${CLAUDE_PLUGIN_ROOT}/scripts/sac_scan_diagrams.py" --root . --json```2. **Materialize** via full capture (or orchestrate):```bashpython3 "${CLAUDE_PLUGIN_ROOT}/scripts/sac_orchestrate.py" --scan-root . --system "MySystem"# domains include diagrams + code by default```3. **Author new design diagrams** (when designing features/apps): - Create concept under `diagrams/` using the right type. - Put the listing in a `## Diagram` section inside ```mermaid or ```plantuml fences. - Link with `visualizes` / `diagrams` / `wireframes` / `models` to Service, WebApp, ApiContract, Database, Class, etc.4. **Code structure** (modules / classes / methods / functions):```bashpython3 "${CLAUDE_PLUGIN_ROOT}/scripts/sac_scan_code_structure.py" --root .```- `Package` = build unit (npm/maven/gradle/…)- `Module` = source module / namespace inside a package- `Class` / `Interface` / `Enum` / `Method` / `Function` = code-level concepts for design and blast radius## Rules1. Prefer **specific** diagram types over bare `Diagram`.2. Always keep the diagram source **in the Markdown** (never only as a PNG link).3. One primary listing per concept; extra variants can be additional sections.4. After writing, link related topology and run `sac_validate.py --schema`.5. For UI work, use PlantUML **salt** wireframes linked to `WebApp` / `MobileApp` / `Channel`.For C4 level views and Structurizr, use skill **sac-c4** (`docs/c4-integration.md`).

Frequently asked questions