# Visualize > Add a correct, minimal visual to a lesson — a diagram or geometric picture — that renders inline in the Obsidian log. Use when an idea is genuinely clearer as a picture: a dependency graph, system/flow, sequence, state machine, tree, comparison, or a spatial/geometric thing (coordinate geometry, number line, vectors, a plot, a physical layout). Outsources authoring+rendering to a maker subagent t… - **Type:** Skill - **Install:** `agentstack add skill-therapys-dotagents-visualize` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [therapys](https://agentstack.voostack.com/s/therapys) - **Installs:** 0 - **Category:** [Productivity](https://agentstack.voostack.com/c/productivity) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [therapys](https://github.com/therapys) - **Source:** https://github.com/therapys/dotagents/tree/main/skills/visualize ## Install ```sh agentstack add skill-therapys-dotagents-visualize ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Visualize A picture earns its place only when it shows something words can't — shape, structure, direction, relationship, geometry. This skill produces ONE such picture, guarantees it is **correct** (the maker renders it and looks at it before returning), and drops it into the lesson so it renders inline in the Obsidian `md-log` file. You are the **creative director**: decide the exact idea and distill it to its fewest carrying elements. A **maker subagent** does the authoring, rendering, visual verification, and saving, then returns a filename you embed. ## When to visualize (and when not to) This teaching system builds a **dependency graph in the learner's head** — axioms at the root, derived facts hanging off them. A visual is powerful exactly when it makes that structure (or a geometry) visible: - **Structure or relationship**: dependencies, a system with parts and arrows, a flow/pipeline, a sequence of exchanges, a state machine, a tree/hierarchy, a comparison, a containment (inside vs outside). - **Spatial or geometric**: coordinate geometry, a number line, vectors, a function's shape, a physical arrangement. Do NOT visualize when prose or a single equation already carries it — a decorative diagram that just restates the neighboring sentence adds noise and a chance to be wrong. When in doubt, don't: a missing visual is cheaper than a false one. ## Choose the maker Two makers, discovered from `.pi/agents/`: - **`mermaid-maker`** (default) — structural/relational: dependency graphs, flowcharts, sequence/state/ER/class diagrams, trees, mindmaps, timelines. Fits the dependency-graph pedagogy directly. - **`svg-maker`** — spatial/geometric that Mermaid can't lay out: exact coordinates, geometry figures, number lines, vectors, plots, custom shapes. Rule of thumb: *nodes-and-edges / relationships* → mermaid-maker; *positions-and-shapes / geometry* → svg-maker. ## Brief the maker: one idea, fewest elements The most common failure is **cramming** — every extra label makes the picture harder to read AND harder to lay out correctly. Prune first; for each element ask *"if I delete this, is the idea still clear?"* — if yes, delete it. Give the maker the concept AND the concrete elements you want (not a vague topic, not a long checklist). If your brief lists more than ~5–7 elements, cut it first. - BAD: "make a diagram about how TCP works" - GOOD: "graph TD: a node 'packet' at the top; arrows down to 'ordering' and 'retransmit on loss'; both arrows down into 'reliable stream'. No title. Show that reliability is built FROM packets, not alongside them." ## Invoke Dispatch the maker with the `subagent` tool: ``` subagent(agent="mermaid-maker", task="") subagent(agent="svg-maker", task="") ``` The maker owns its purpose-built tools (`write_*`/`edit_*`/`render_*`): it authors the source, renders it to a PNG, **looks at the PNG and iterates until it is correct and clean**, publishes it into the vault with a unique filename, and returns: ``` RESULT: filename: viz--.png path: /viz/viz--.png ``` If it returns `RESULT: NONE`, it couldn't make a correct picture of the brief — simplify, rethink, or decide the visual isn't worth it. Never hand-author or fake a diagram yourself; correctness depends on the maker's render-and-inspect loop. ## Embed it in the lesson Put the embed directly in your teaching reply, using Obsidian's wikilink embed with the returned **filename** (not the full path) and a display width: ``` ![[viz--.png|500]] ``` The `md-log` extension mirrors your reply text verbatim into the linked `.md`, and Obsidian resolves the embed by filename anywhere in the vault (the maker saves into the project's `viz` folder, which is inside the vault) — so it renders inline automatically. `|500` is a good default; use larger for dense diagrams. Introduce the visual in a sentence, then let it carry the idea — don't narrate every element back in prose. ## Why this is reliable - The maker never returns a picture it hasn't **looked at**, so "renders fine but says something false" is caught before it reaches the learner. - PNG embed means what the maker verified is pixel-identical to what the learner sees — no re-render drift. - Unique filenames keep Obsidian's by-filename embed resolution unambiguous. > The makers render through the project's `visual-tools` extension (Mermaid via a bundled `@mermaid-js/mermaid-cli` + installed Chrome; SVG via `rsvg-convert`, fallback ImageMagick). You brief the maker and embed the filename it returns — you render nothing yourself. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [therapys](https://github.com/therapys) - **Source:** [therapys/dotagents](https://github.com/therapys/dotagents) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-therapys-dotagents-visualize - Seller: https://agentstack.voostack.com/s/therapys - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.