# Visualize

Add a correct, minimal visual to a lesson, a diagram or geometric picture, that...

- Repository: https://github.com/amosblomqvist/learn (3996 stars)
- Category: AI and agents
- License: see repository
- Last updated: 2026-08-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add amosblomqvist/learn --skill visualize -g -a claude-code -y`
Codex: `npx skills add amosblomqvist/learn --skill visualize -g -a codex -y`
Cursor: `npx skills add amosblomqvist/learn --skill visualize -g -a cursor -y`
Gemini CLI: `npx skills add amosblomqvist/learn --skill visualize -g -a gemini-cli -y`

## Description

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 that verifies the image by looking at it, then you embed the returned file.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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**. You 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 that filename in your reply.

## 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. Reach for one when:

- The idea is a **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 (what's inside vs outside).
- The idea is **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 sentence next to it 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`**, structural/relational visuals: dependency graphs, flowcharts, sequence/state/ER/class diagrams, trees, mindmaps, timelines. This is the default and fits the dependency-graph pedagogy directly.
- **`svg-maker`**, spatial/geometric visuals Mermaid can't lay out: exact coordinates, geometry figures, number lines, vectors, plots, custom shapes.

The rest: https://github.com/amosblomqvist/learn/blob/HEAD/skills/visualize/SKILL.md