SourceCanvas

Draw diagrams with code: flowcharts, sequence diagrams, class diagrams, Gantt charts, mind maps, timelines, and more. Learn, edit, save, and export.

SourceCanvas is a lightweight workspace for drawing diagrams with code. It helps you write, learn, review, and export SVG and Mermaid-style diagrams locally.

Write a diagram in text and see it take shape beside the source. SourceCanvas is useful when you want a calm way to learn diagram syntax, build documentation graphics, or keep flowcharts and architecture notes close to the code that defines them.

Highlights • Write and edit diagram code with live visual feedback • Learn common diagram patterns by changing readable source examples • Create flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, timelines, mind maps, kanban boards, pie charts, quadrant charts, sankey charts, radar charts, treemaps, journeys, requirement diagrams, C4 diagrams, and more • Preview SVG markup, Mermaid source, and Markdown fenced Mermaid blocks • Open local .svg, .mmd, and .mermaid files • Use Auto mode to detect source type, or choose SVG or Mermaid manually • Save the current source for use in other editors or projects • Choose transparent, white, paper, mist, or slate backgrounds for SVG and Mermaid previews • Use Fit Screen to restore the best scale for the current preview area • Use the refreshed iPhone three-row toolbar and pinch to zoom inside the preview • Work on iPad with a focused top command area and side-by-side source/preview layout • Review wide source and preview workspaces on macOS and Apple Vision Pro • Export PNG 1x, PNG 2x, PNG 3x, or PDF • See friendly Mermaid render feedback with a small debug code when needed

Supported diagram names Flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, user journeys, Gantt charts, Git graphs, pie charts, quadrant charts, XY charts, requirement diagrams, C4 diagrams, timelines, mind maps, kanban boards, sankey charts, packet diagrams, radar charts, block diagrams, tree views, architecture diagrams, event modeling diagrams, Ishikawa diagrams, Venn diagrams, treemaps, Wardley maps, and info diagrams.

SourceCanvas describes only the SVG and diagram-code capabilities implemented in the current app. Core writing, preview, learning, save, and export workflows run locally and do not require a remote rendering service.