v0.6.3

Documentation

• Added explicit warning against using bare <pre class="mermaid"> tags — they render but produce tiny unusable diagrams without zoom/pan controls. Updated SKILL.md to point to the full diagram-shell pattern from templates/mermaid-flowchart.html.

v0.6.2

Bug Fixes

• Fixed fullscreen diagram export using wrong background color — now uses the same dark/light mode that was used to render the Mermaid theme

v0.6.1

Pi Install Script

• New install-pi.sh for one-command installation
• Automatically patches {{skill_dir}} to actual install path
• Usage: curl -fsSL https://raw.githubusercontent.com/nicobailon/visual-explainer/main/install-pi.sh | bash

v0.6.0

Based on PR #25 by @peak-flow, with additional multi-diagram architecture and bug fixes.

Multi-Diagram Support

• New vector-based zoom/pan engine replacing CSS zoom with direct SVG sizing
• Closure-based initDiagram(shell) pattern — per-diagram state in closures, shared drag listeners at module scope
• Unlimited diagrams per page with no ID collisions (each diagram gets a unique generated ID)
• New HTML structure: .diagram-shell > .mermaid-wrap > .mermaid-viewport > .mermaid-canvas
• Source Mermaid code lives in <script type="text/plain" class="diagram-source"> to avoid parsing issues
• Adaptive viewport height based on diagram aspect ratio
• Smart fit algorithm with readability floor (prevents tiny unreadable diagrams)
• New zoom controls: 1:1 button, zoom percentage label
• Touch pinch-to-zoom support with proper pan transition
• Double-click to fit diagram

Bug Fixes

• Fixed touch pinch→pan transition (reset start coords after pinch ends)
• Removed dead fitZoom variable from previous implementation
• Removed 12 lines of dead scrollbar CSS (no longer needed with new viewport approach)

Documentation

• Updated css-patterns.md with new multi-diagram structure and JavaScript pattern
• Simplified Mermaid section to reference mermaid-flowchart.html as canonical source

v0.5.1

Claude Code Marketplace Structure

• Restructured repo to follow Claude Code's official plugin marketplace spec
• Moved all skill files into plugins/visual-explainer/ subdirectory
• Added .claude-plugin/marketplace.json catalog for marketplace discovery
• Plugin manifest now at plugins/visual-explainer/.claude-plugin/plugin.json
• Install via marketplace: /plugin marketplace add nicobailon/visual-explainer then /plugin install visual-explainer@visual-explainer-marketplace

Pi Manual Install

• Replaced pi install one-liner with manual installation instructions
• Pi users now clone repo and copy skill + prompts to ~/.pi/agent/skills/ and ~/.pi/agent/prompts/
• Removed stale pi field from package.json (was pointing to non-existent root paths)

OpenAI Codex Install Fix

• Fixed prompts path: ~/.codex/prompts/ (was incorrectly ~/.agents/commands/)
• Prompts are optional (deprecated feature) — skill works without them via $visual-explainer
• With prompts installed, invoke as /prompts:diff-review, /prompts:plan-review, etc.
• Added Available Commands section to SKILL.md for discoverability

Breaking Changes

• Direct Claude Code plugin install (/plugin install https://...) no longer works — use marketplace flow instead
• pi install https://github.com/nicobailon/visual-explainer no longer works — use manual install

v0.5.0

Class Diagram and C4 Architecture Support

• Added classDiagram guidance for OOP design and domain modeling
• C4 architecture via graph TD + subgraph (not native C4Context which ignores themes)
• Directory tree CSS pattern (.dir-tree, .dir-compare)
• Quick-reference table for choosing Mermaid diagram types

Claude Code & Codex Support

• .claude-plugin/plugin.json manifest for Claude Code plugin install
• Renamed prompts/ to commands/ (works for pi, Claude Code, and Codex)
• OpenAI Codex install instructions in README

Share Command

• New /share command for instant page sharing via Vercel
• Zero auth required — just bash scripts/share.sh mypage.html

Bug Fixes

• Fixed pi skill loading (scoped to ./SKILL.md)
• Fixed Mermaid line breaks: use <br/> not \n
• Fixed mermaid-flowchart.html CSS centering

v0.4.4

Hybrid Architecture Pattern

• New pattern for complex architectures (15+ elements): simple Mermaid overview (5-8 nodes) + CSS Grid cards for details
• Updated "Architecture / System Diagrams" section in SKILL.md with three-tier approach based on complexity
• Reduced max Mermaid node count from 15-20 to 10-12 in libraries.md
• Updated Mermaid scaling guidance to recommend hybrid pattern over scaling tricks for complex diagrams

v0.4.3

Mermaid Zoom and Positioning Fixes

• Fixed zoom clipping: Replaced transform: scale() with CSS zoom property. Transform only changes visual appearance — content expanding upward/leftward goes into negative space which can't be scrolled to. Zoom changes actual layout size, so overflow scrolls normally in all directions.
• Fixed vertical centering: Changed align-items: flex-start to align-items: center so diagrams are centered both horizontally and vertically in their container.
• Added initial zoom: Complex diagrams can start at zoom > 1 (e.g., 1.4x) for better readability while keeping zoom controls functional.
• Added min-height: Containers now have min-height: 400px to prevent vertical flowcharts from compressing into unreadable thumbnails.
• Removed unnecessary .mermaid-inner wrapper — no longer needed with zoom-based approach.
• Updated JavaScript to use INITIAL_ZOOM constant for consistent reset behavior.
• Updated "Scaling Small Diagrams" section to use zoom instead of transform: scale() for consistency.

v0.4.2

Link Styling

• New "Link Styling" section in css-patterns.md — never rely on browser default link colors; use accent colors with sufficient contrast

v0.4.1

Mermaid Layout Direction

• New "Layout Direction: TD vs LR" section in libraries.md
• Prefer flowchart TD (top-down) over flowchart LR (left-to-right) for complex diagrams
• LR spreads horizontally and makes labels unreadable with many nodes
• Rule: use TD for 5+ nodes or any branching; LR only for simple 3-4 node linear flows

Documentation

• Simplified README: trimmed Usage section, consolidated Install, added Slide Deck Mode section
• Added /generate-visual-plan to command table