# Diagramming

> USE FOR: draw.io and Mermaid diagram authoring, preview, export, layout, color, and asset workflows in this repo. DO NOT USE FOR: data-platform or generic coding tasks.

- Skill: `i9wa4/diagramming` (Agent Skill, multi-file: 13 files)
- Install (CLI): `npx skillmds@latest add i9wa4/diagramming`
- Raw SKILL.md: https://api.skillmd.com/api/skills/i9wa4/diagramming/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: i9wa4 (https://skillmd.com/u/i9wa4)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/i9wa4/diagramming

---


# Diagramming

Owns repo-local diagramming guidance for draw.io and Mermaid workflows. Use this
skill for diagram source edits, preview/export decisions, layout checks,
color/asset conventions, and diagram-focused validation.

## 1. Scope

- draw.io `.drawio` source creation, editing, review, and export.
- draw.io layout, color palette, shape vocabulary, and AWS icon usage.
- Mermaid diagrams in Quarto revealjs `.qmd` files.
- Mermaid CLI preview, `%%{init}%%` configuration, CSS overrides, and layout
  validation.
- Diagram-focused scripts and reference assets.

Out of scope:

- Data-platform workflows; use `data-platform`.
- GitHub issue, PR, review, or public-surface mechanics; use
  `dev-platform-workflow`.
- Generic Bash, Python, Nix, Markdown, or implementation-loop work; use
  `programming`.
- Agent harness runtime, hooks, postman routing, or installed agent outputs;
  use `dotfiles`.

## 2. Workflow

1. Inspect the diagram source, nearby conventions, and `git status`.
2. Choose the focused reference below before editing or validating diagrams.
3. Preserve editable source files; treat generated exports as reproducible
   outputs unless the surrounding workflow requires them.
4. Verify rendered dimensions, text contrast, and overlap when diagram layout
   changes are user-visible.
5. Run the nearest diagram or Markdown checks before reporting success.

## 3. References

- [draw.io](references/drawio.md)
- [Mermaid](references/mermaid.md)