Obsidian Visual Skills Pack — Generate Excalidraw, Mermaid & Canvas Diagrams from Text

"Draw me a diagram of X"
        │
        ├─ Architecture / system design?  → Excalidraw
        │   (hand-drawn feel, flexible layout)
        │
        ├─ Process / sequence / state?    → Mermaid
        │   (structured, version-controllable)
        │
        └─ Relationships / exploration?   → Canvas
            (interactive, node-and-edge, zoomable)

Obsidian mode (default):
  → .md file with embedded Excalidraw JSON
  → Opens directly in Obsidian with Excalidraw plugin
  → Can edit visually in-place

Standard mode:
  → .excalidraw file
  → Editable on excalidraw.com
  → Good for sharing outside Obsidian

Animated mode:
  → .excalidraw file with animation sequencing
  → Elements appear step-by-step
  → Great for presentations and teaching

You: Draw an Excalidraw diagram showing the PCSAT verification
     pipeline: source program → CHC encoding → PCSAT solver →
     verdict. Show the relational cost invariant as an annotation
     on the encoding step. Use the hierarchy layout.

You: Create an animated Excalidraw diagram showing how merge sort
     works on the array [38, 27, 43, 3, 9, 82, 10]. Show each
     split and merge step appearing sequentially.

You: Create a Mermaid sequence diagram showing the type checking
     process for a function application in STLC:
     1. Check function has arrow type
     2. Check argument matches domain
     3. Return codomain type
     Show the environment lookups and the error case.

```mermaid
sequenceDiagram
    participant TC as TypeChecker
    participant Env as Γ (Environment)
    participant Fun as e₁ (Function)
    participant Arg as e₂ (Argument)

    TC->>Fun: typecheck(e₁)
    Fun-->>TC: τ₁ → τ₂
    TC->>Arg: typecheck(e₂)
    Arg-->>TC: τ₁'
    alt τ₁ = τ₁'
        TC-->>TC: return τ₂
    else τ₁ ≠ τ₁'
        TC-->>TC: TypeError: expected τ₁, got τ₁'
    end
```

You: Mermaid state diagram for the TCP 3-way handshake.
     Show CLOSED, SYN_SENT, SYN_RECEIVED, ESTABLISHED states
     with transitions labeled by segment types.

You: Create a Canvas mind map of the relational verification
     literature. Center node: "Relational Verification". Branch
     into: Type-based (RelCost, DuCostIt), Logic-based (PCSAT,
     CHC), Simulation-based (bisimulation, coupling). For each
     paper, add author and year. Color-code by approach.

You: Create a Canvas for CS305 Module 3: Memory Safety.
     Central topic: "Memory Safety". Branches:
     - Spatial safety (buffer overflows, bounds checking)
     - Temporal safety (use-after-free, dangling pointers)
     - Rust ownership model (borrow checker, lifetimes)
     - Tools (AddressSanitizer, Valgrind, Miri)
     Link each leaf to the corresponding lecture note if it
     exists in the vault.

What do you need?
│
├─ Something that looks hand-drawn / informal?
│  ├─ Static? → Excalidraw (Obsidian mode)
│  └─ Animated / step-by-step? → Excalidraw (animated mode)
│
├─ Something structured / version-controllable?
│  ├─ Sequence of interactions? → Mermaid (sequence diagram)
│  ├─ State machine? → Mermaid (state diagram)
│  └─ Process flow? → Mermaid (flowchart)
│
└─ Something interactive / navigable?
   ├─ Hierarchical topic? → Canvas (MindMap mode)
   └─ Freeform relationships? → Canvas (Freeform mode)

Web Clipper          CLI              kepano/skills      Visual Skills
(CAPTURE)     →    (READ)      →    (EDIT/CREATE)   →   (DRAW)
                                                          │
Clip papers         Search vault     Write .md            ├─ Excalidraw
from arXiv          Read notes       Edit .base           ├─ Mermaid
Save to inbox/      Feed context     Build .canvas        └─ Canvas
                                     Update props

Example flow:
1. Clip 5 papers on type safety with Web Clipper
2. CLI reads them, feeds to Claude
3. kepano/skills organizes metadata in a .base view
4. Visual Skills generates a Canvas knowledge graph
   linking all papers with relationship edges

You: I need a figure for Section 3 of our POPL paper showing
     the type system architecture. Draw an Excalidraw diagram
     with: Surface language → Elaboration → Core IR → Type checker
     → Verified program. Show the relational cost annotations
     flowing through each stage.

You: Create a Mermaid flowchart showing the dependency structure
     of our soundness proof. Lemma 1 (substitution) feeds into
     Lemma 3 (preservation). Lemma 2 (canonical forms) feeds into
     Lemma 4 (progress). Both feed into Theorem 1 (soundness).
     Color completed lemmas green, in-progress yellow, unstarted red.

You: Canvas mind map of all papers cited in our Related Work
     section. Group by: type-based approaches, logic-based
     approaches, testing-based approaches. Add edges where
     Paper A extends Paper B. Link each node to the clipped
     note in my vault.

You: Animated Excalidraw of Dijkstra's algorithm on a 6-node
     graph. Step 1: initialize distances. Step 2: visit node A.
     Step 3: relax edges. ... Show the priority queue state at
     each step. Each step appears sequentially.

You: Mermaid class diagram showing the AST node hierarchy for
     our teaching language: Expr (base) → IntLit, BoolLit, BinOp,
     IfExpr, LetExpr, FunExpr, AppExpr. Include the key fields
     for each node.

You: Canvas mind map for the entire CS305 syllabus. Center:
     "CS305 Computer Security". Branches for each module
     (Crypto, Web Security, Memory Safety, Access Control,
     Network Security). Each module links to its lecture notes
     folder. Color by unit exam coverage.

You: Canvas freeform diagram showing how all CS305 concepts
     connect. Buffer overflow → leads to → code injection.
     ASLR → mitigates → code injection. Stack canaries →
     detect → buffer overflow. Make it dense — this is a
     review sheet, not a teaching tool.