visualize2

name

visualize2

description

Create diagrams, charts, animations and technical illustrations in non-HTML formats (SVG/PNG/PDF/MP4/GIF/JSON). Dispatch to the best of 6+ methods — Plotly, PlantUML, Mermaid, D2, Excalidraw, svg-precision, matplotlib/Manim animation — based on user intent. Triggered when the user asks to draw / visualize / 図にして / 絵にして / グラフ化 / 可視化 / 見える化 / アーキテクチャ図 / シーケンス図 / クラス図 / フローチャート / アニメ化 / GIF化 / MP4化 / Sankey / ヒートマップ / UML / C4 / ER図 / etc. Operates in two modes — (a) interactive (clarify intent then render), and (b) automatic (when the user already specified diagram type, data and output format). HTML output is intentionally excluded; for HTML-first needs use the legacy visualize skill or frontend-design.

visualize2

Pick the best rendering method for the user's intent and produce a non-HTML artifact (SVG/PNG/PDF/MP4/GIF/JSON). Operate either interactively (ask 1–3 clarifying questions, then render) or automatically (when the request fully specifies type/data/output).

1. Workflow

[user request]
  ↓
[Step 1] Classify the intent  →  see references/methods.md
  ↓
[Step 2] Choose a method       →  see Section 3 (decision rules)
  ↓
[Step 3] Confirm or proceed    →  see Section 4 (modes)
  ↓
[Step 4] Generate              →  use scripts/* and reference the method's reference file
  ↓
[Step 5] Save under ./outputs/ →  filename + format per Section 5

2. Supported methods (6) and what each is best at

#	Method	Best for (representative diagram names)	Output
1	Plotly	line / bar / scatter / histogram / box / violin / pie / donut / heatmap / radar / Sankey / treemap / sunburst / 3D scatter / 3D surface / contour / candlestick / funnel / timeline-Gantt / parallel coordinates	SVG (default), PNG, PDF
2	PlantUML	sequence / class / use case / activity / state / component / deployment / object / C4 Context/Container/Component / ER (IE) / Gantt / mindmap / WBS / JSON / YAML / wireframe (salt)	SVG, PNG, PDF
3	Mermaid	flowchart / sequence / Gantt / ER / userJourney / state / pie / gitGraph / mindmap / timeline / quadrantChart / requirementDiagram / sankey	SVG, PNG, PDF
4	D2	architecture (beautiful default) / network / C4 / containers / sequence / hierarchical tree / dataflow	SVG, PNG, PDF
5	Excalidraw	hand-drawn whiteboard sketches / brainstorming / informal architecture / user flow (discussion) / ER (discussion) / concept maps	.excalidraw JSON (+ exported PNG / SVG)
6	svg-precision	icons / badges / minimalist logo / pixel-precise technical block diagram / tight conceptual diagrams (each coord controlled)	SVG, PNG
7	matplotlib animation / Manim	algorithm visualization / sorting / graph traversal / time-series animation / mathematical proof / packet-flow / step-by-step explainer	MP4, GIF

Detailed per-method patterns: load the matching references/<method>.md file lazily.

3. Method selection — decision rules

Apply rules top-to-bottom; pick the first that matches.

1. User explicitly named a method ("Plotlyで", "Mermaidで", "Excalidrawで", "PlantUMLで", "D2で", "アニメで", "GIFで") → use that method.
2. User asked for animation / motion / GIF / MP4 / 動画 → matplotlib animation (Manim only if user explicitly says "Manim").
3. User asked for a UML/C4-named diagram (sequence / class / state / activity / component / use case / deployment / C4) → PlantUML. Exception: flowchart → Mermaid (not "UML"); C4 with the prettiest defaults → D2.
4. User asked for a Mermaid-native chart (gitGraph, mindmap, timeline, quadrantChart, userJourney, requirementDiagram) → Mermaid.
5. User asked for an architecture / system / network / dataflow / container diagram with no DSL preference → D2 (best default visual quality).
6. User asked for a whiteboard / sketch / brainstorm / 手描き風 / 議論用 diagram → Excalidraw.
7. User asked for an icon / badge / logo / precise SVG / spec-driven graphic → svg-precision.
8. User has numeric data and wants a chart (time-series, distribution, comparison, composition, correlation, flow, hierarchy) → Plotly. Sub-rules:
   • "推移" / time-series → line; "分布" → histogram or box; "比較" → bar; "構成" → pie/donut/treemap/sunburst; "相関" → scatter; "流れ・遷移量" → Sankey; "曜日×時刻" / matrix → heatmap; "3次元" → 3D scatter / surface; "金融" → candlestick.
9. Tie-breaker — if multiple still apply, prefer in this order: PlantUML > D2 > Mermaid > Plotly > Excalidraw > svg-precision > animation. (Most-canonical rendering wins.)

Full diagram-name → method mapping: see references/methods.md (read on demand).

4. Two operating modes

4a. Interactive (default when intent is ambiguous)

Ask at most 1–3 short questions before generating:

1. What is being visualized? (data? system? concept? process?)
2. For what audience / where will it be used? (slide / blog / docs / Slack / printout)
3. Output format preference? (SVG / PNG / PDF / MP4 / GIF) — default per method (Section 5) if not specified.

Then: state the chosen method + format briefly, generate, save, report path.

4b. Automatic (no clarification)

When the request fully specifies type, content, and output (or output can be inferred), proceed without questions. Examples that trigger automatic mode:

• "売上推移を折れ線グラフでSVG保存して" → Plotly + line + SVG
• "ログインのシーケンス図をPDFで" → PlantUML + sequence + PDF
• "data_flowをGIFアニメで" → matplotlib animation + GIF
• "C4 Container図をD2で書いてSVG出力" → D2 + C4 + SVG

When automatic mode runs, briefly state the choice in one line ("Plotly + 折れ線 + SVG で生成します") then produce.

5. Output format defaults (HTML excluded)

Method	Default	Also supported
Plotly	SVG	PNG, PDF
PlantUML	SVG	PNG, PDF
Mermaid	SVG	PNG, PDF
D2	SVG	PNG, PDF
Excalidraw	.excalidraw (JSON)	PNG, SVG (via web/CLI export)
svg-precision	SVG	PNG (via cairosvg)
matplotlib animation	MP4	GIF

Save outputs to ./outputs/ (relative to the project's CWD) unless the user specifies a path. Filename: lowercase snake_case derived from intent (e.g. revenue_trend.svg, login_sequence.pdf). Do not overwrite an existing file with the same name without confirming.

6. Tools & dependencies

The skill auto-detects what is installed and falls back gracefully.

Method	Primary tool	Fallback / notes
Plotly	plotly + kaleido (Python)	required for SVG/PNG/PDF
PlantUML	scripts/render_plantuml.py (uses public plantuml.com server, no Java needed)	if plantuml.jar is on $PATH and Java is available, that is preferred
Mermaid	scripts/render_mermaid.py (uses public Kroki / mermaid.ink)	@mermaid-js/mermaid-cli (mmdc) if installed
D2	scripts/render_d2.py (uses Kroki)	local d2 binary if installed
Excalidraw	write .excalidraw JSON; tell user to open in https://excalidraw.com	optional Playwright pipeline can be added
svg-precision	direct SVG authoring + scripts/svg_to_pdf.py for SVG→PNG/PDF	requires cairosvg
matplotlib animation	matplotlib + ffmpeg (MP4) and/or Pillow (GIF)	If libx264 is missing, codec falls back to mpeg4

Run scripts via CLAUDE.md's run_python if available, otherwise the system Python that has the required packages.

# Standard pattern
source ~/.claude/lib/load_env.sh
run_python ~/.claude/skills/visualize2/scripts/render_plantuml.py <input.puml> [--out <basename>] [--formats svg,png,pdf]

7. Method-specific authoring pointers

When generating, read only the relevant reference file (progressive disclosure):

• references/methods.md — diagram-name → method lookup table (read first when uncertain about which method)
• references/plotly.md — Plotly chart type recipes, Japanese-font handling, color systems
• references/plantuml.md — UML/C4 templates (sequence/class/component/C4), styling
• references/mermaid_d2.md — Mermaid + D2 syntax templates
• references/excalidraw.md — .excalidraw JSON format v2
• references/svg_precision.md — SVG spec rules (4px grid, hairlines, accessible color)
• references/animation.md — matplotlib FuncAnimation patterns + writer config

8. Quality bar

• SVG: must include viewBox, width, height. No NaN/inf coords. Prefer absolute coords.
• PNG: scale ≥2 if the use case is presentation; otherwise scale 1.
• PDF: ensure embedded fonts; avoid raster fallback for vector content.
• MP4/GIF: keep ≤ 30 MB; if unavoidable, warn the user.
• No emojis in text/labels unless the user explicitly asks for them.
• Japanese text: ensure the chosen renderer has a Japanese-capable font (see per-method reference).

9. Failure handling

• If a render returns 0 bytes / non-200 / a service error → retry up to 3 times with backoff.
• If retries exhausted → fall back to a different method that can express the same content (e.g., PlantUML sequence → Mermaid sequence).
• Always show the user what method/format was actually used, especially after a fallback.

10. End-of-task report

After generating, report in 1–2 lines:

✅ <method> + <format> で <filename> を作成しました（<size> KB）。

If multiple files: list paths in a code block. If interactive mode and the user might want a tweak, append: "色味/サイズ/レイアウトを調整しますか？"