canvas
JSON Canvas Visualizer
Quick Start: Define nodes with id, type, x, y, width, height → Plan layout on 100px grid → Connect edges with fromNode/toNode → Apply colors (1-6) → Wrap in ```canvas fence. Origin (0,0) at top-left, X right, Y down. Obsidian Canvas compatible.
Critical Syntax Rules
1. Structure Format
{
"nodes": [
{"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
],
"edges": []
}
2. Node Types
More from larchliu/md2x
md2x
Convert Markdown files to PDF, DOCX, HTML, or full-page images (png/jpg/webp). Use `npx md2x <input.md> -f <docx|pdf|html|png|jpg|jpeg|webp> [options]`.
12mermaid
Create flowcharts, sequence diagrams, state machines, class diagrams, Gantt charts, mindmaps, and more. Best for process flows, API interactions, system architecture, and technical documentation. NOT for data-driven charts (use vega) or quick KPI visuals (use infographic).
5vega
Create data-driven charts with Vega-Lite (simple) and Vega (advanced). Best for bar, line, scatter, heatmap, area charts, and multi-series analytics. Use when you have numeric data arrays needing statistical visualization. Vega for radar charts and word clouds. NOT for process diagrams (use mermaid) or quick KPI cards (use infographic).
5graphviz
Create complex directed/undirected graphs with precise layout control. Best for dependency trees, org charts, network topologies, and module relationships. Use when you need fine-grained edge routing or hierarchical layouts with many levels. NOT for simple flowcharts (use mermaid) or data charts (use vega).
5infographic
Create beautiful infographics with pre-designed templates. Best for KPI cards, timelines, roadmaps, step-by-step processes, A vs B comparisons, SWOT analysis, funnels, org trees, pie/bar charts. Use when you need quick visual impact with 4-8 items. Simple YAML-like syntax. NOT for complex data analysis (use vega) or technical flowcharts (use mermaid).
5