Write diagrams with code
Create flowcharts, sequence diagrams, class diagrams, Gantt charts, mind maps, and more while the visual result updates beside the source.
SourceCanvas
Draw diagrams with code
Write flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, timelines, and mind maps with code, then see the result beside the source. SourceCanvas makes diagram writing, learning, saving, and PNG/PDF export feel calm.
- Write and see instantly
- Learn many diagram types
- Works on Mac, iPad, iPhone, and Apple Vision Pro
Core Features
From learning a diagram pattern to finishing a documentation graphic, common code-drawing tasks stay in one workspace.
Learn Mermaid diagrams
Study readable examples for nodes, links, participants, timelines, task ranges, and diagram structure by editing the source.
Broad diagram coverage
Work across flow and structure diagrams, project planning charts, knowledge maps, data charts, and special-purpose diagrams.
Open and save source
Open .svg, .mmd, and .mermaid files, then save diagram source back into projects or documentation folders.
Zoom, backgrounds, and export
Use pinch zoom and background choices to inspect details, then export PNG 1x, PNG 2x, PNG 3x, or PDF.
Ways to Use SourceCanvas
From learning diagram patterns to finishing documentation graphics, SourceCanvas keeps writing, preview, saving, and export in one clear workflow.
Learn from examples
Start with common charts like flowcharts, sequence diagrams, Gantt charts, and mind maps, then edit the source to understand the structure.
Write and see the result
Keep source and preview side by side so changes to nodes, links, task ranges, and groups are easy to check.
Draw across devices
Use Mac for keyboard-heavy writing, iPad and iPhone for touch review, and Apple Vision Pro for larger diagram viewing.
Save source or export images
Save .mmd, .mermaid, and .svg source files, or export PNG 1x, PNG 2x, PNG 3x, and PDF.
Mermaid Diagrams You Can Write
SourceCanvas focuses on turning readable code into useful diagrams. Start with common chart names, then learn more diagram styles as your documents grow.
Flow and structure
- Flowcharts / graphs
- Sequence diagrams
- Class diagrams
- State diagrams
- ER diagrams
- Requirement diagrams
- C4 architecture diagrams
Planning and knowledge
- Gantt charts
- Git graphs
- User journey maps
- Timelines
- Mind maps
- Kanban boards
- Architecture diagrams
- Event modeling diagrams
Data and analysis
- Pie charts
- Quadrant charts
- XY charts
- Sankey charts
- Radar charts
- Treemaps
- Info diagrams
Special-purpose diagrams
- Packet diagrams
- Block diagrams
- Tree views
- Ishikawa diagrams
- Venn diagrams
- Wardley maps
Some newer diagram styles may evolve over time; flowcharts, sequence diagrams, Gantt charts, and mind maps are good places to start learning.
Code Drawing Tutorial
Write diagram code, choose the diagram mode, inspect the result, then save or export in four steps. Select any step below.
Write diagram code or open a local file
Write code for a flowchart, sequence diagram, Gantt chart, mind map, or another diagram type in the editor. You can also open .svg, .mmd, and .mermaid files directly.
- Good for learning Mermaid diagrams from examples.
- Good for maintaining documentation flowcharts and architecture diagrams.
- macOS supports drag and drop; iOS, iPadOS, and visionOS use the system file entry point.
Use Auto / SVG / Mermaid mode
Auto detects the type from content and file extension. For mixed snippets or forced rendering, switch manually to SVG or Mermaid.
- Auto works for most paste and file-opening tasks.
- SVG keeps rendering on the SVG path.
- Mermaid uses the diagram renderer and shows background options.
Inspect source and result together
The preview area reports render state. Zoom in or out to inspect details, and use two-finger pinch zoom directly on iPhone and iPad.
- Check fine strokes, nodes, and labels with buttons or touch gestures.
- Mermaid uses a paper background by default and can switch to transparent, white, mist, or dark.
- Invalid input gets clear feedback so you can fix it quickly.
Save source or export the preview
After the graphic looks right, save the source in its matching format or export the preview as PNG 1x, PNG 2x, PNG 3x, or PDF for docs, specs, and reviews.
- Save SVG source as .svg.
- Save Mermaid source as .mmd or .mermaid.
- On iOS, save and export both use the system file panel, and exports keep the current graphic and background setting.
Supported Platforms
One preview flow adapts to desktop, touch screens, and spatial computing, with layouts tuned for each screen size.
Mac: keyboard-first wide workspace
Wide screens keep source and preview side by side for quick checks across code, docs, and design tools.
iPad: side-by-side source workspace
With the left tool column removed, the top command area and side-by-side editor/preview layout make landscape checks faster for SVG icons and Mermaid diagrams.
iPhone: three-row toolbar and pinch zoom
On narrow screens, source and preview stack while icon-only open/save, mode, background, and zoom controls stay reachable.
Apple Vision Pro: large diagram review in spatial windows
Place diagrams and documents in a larger workspace, especially for complex Mermaid charts.
Built for Code Drawing and Diagram Learning
SourceCanvas focuses on diagram editing, Mermaid diagram learning, flowchart drawing, documentation graphics, source saving, and PNG/PDF export.
Diagram editor
Write flowcharts, sequence diagrams, class diagrams, Gantt charts, mind maps, and timelines in code while seeing the result live.
Learn Mermaid diagrams
Start from readable examples and learn nodes, links, branches, participants, task ranges, and diagram structure.
Documentation writing
Turn product flows, system designs, project plans, and knowledge structures into maintainable diagram source.
SVG and visual assets
Keep SVG markup, icons, illustrations, and vector checks alongside the diagram workflow.
PNG/PDF export
Export finished diagrams as PNG 1x, 2x, 3x, or PDF for docs, reviews, lessons, and archives.
FAQ
Quick answers about SVG, Mermaid, file formats, privacy, and export.
Is SourceCanvas free?
This website presents the capabilities of the lightweight local preview tool. Actual pricing and availability should be checked on the App Store page.
Does SourceCanvas upload my files?
The app is positioned as a local preview tool, and its core SVG and Mermaid rendering does not depend on a remote rendering service. The final privacy statement should still match the released app and privacy policy.
Which file formats are supported?
You can paste SVG, Mermaid source, and Markdown Mermaid code blocks, and open .svg, .mmd, and .mermaid files.
Why can Mermaid backgrounds be changed?
Different documents and design contexts use different backgrounds. Transparent, white, paper, mist, and dark backgrounds help catch contrast and edge issues earlier.
When should I export PNG or PDF?
PNG is convenient for documents, tickets, and chat tools. PDF is better for archives, reviews, and vector-friendly document workflows.
What changed in iOS save and export?
Source save now opens the system file panel. Export labels are PNG 1x, PNG 2x, PNG 3x, and PDF so each output scale is clear.
Is it useful for teams?
Yes. It fits teams that need fast local asset and diagram checks, especially frontend development, design QA, product documentation, and technical writing.