Diagramme mit Code schreiben
Flowcharts, Sequenzdiagramme, Klassendiagramme, Gantt-Charts, Mindmaps und mehr erstellen, während das Ergebnis neben der Quelle erscheint.
SourceCanvas
Diagramme entspannt per Code zeichnen
Flowcharts, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Charts, Timelines und Mindmaps per Code schreiben und das Ergebnis daneben sehen. SourceCanvas macht Zeichnen, Lernen, Speichern und PNG/PDF-Export ruhiger.
- Schreiben und sofort sehen
- Viele Diagrammarten lernen
- Für Mac, iPad, iPhone und Apple Vision Pro
Kernfunktionen
Vom Lernen eines Diagrammtyps bis zur fertigen Dokumentationsgrafik bleiben typische Code-Zeichenaufgaben in einem Arbeitsbereich.
Mermaid-Diagramme lernen
Lesbare Beispiele helfen bei Knoten, Verbindungen, Teilnehmern, Timelines, Aufgabenbereichen und Diagrammstruktur.
Viele Diagrammarten
Ablauf- und Strukturdiagramme, Projektplanung, Wissenskarten, Datendiagramme und Spezialdiagramme abdecken.
Quelle öffnen und speichern
.svg-, .mmd- und .mermaid-Dateien öffnen und Diagrammquellen in Projekten oder Dokumentationen weiter pflegen.
Zoom, Hintergründe und Export
Mit Pinch-Zoom und Hintergründen Details prüfen und als PNG 1x, PNG 2x, PNG 3x oder PDF exportieren.
So nutzt du SourceCanvas
Vom Lernen eines Diagrammtyps bis zur fertigen Dokumentationsgrafik bleiben Schreiben, Vorschau, Speichern und Export in einem klaren Ablauf.
Mit Beispielen lernen
Beginne mit Flowcharts, Sequenzdiagrammen, Gantt-Diagrammen und Mindmaps und verstehe die Struktur durch kleine Änderungen am Quelltext.
Schreiben und Ergebnis sehen
Quelltext und Vorschau stehen nebeneinander, sodass Änderungen an Knoten, Verbindungen, Zeiträumen und Gruppen direkt prüfbar sind.
Auf mehreren Geräten zeichnen
Mac eignet sich für Tastatureingaben, iPad und iPhone für Touch-Prüfung, Apple Vision Pro für größere Diagrammansichten.
Quelle speichern oder exportieren
Speichere .mmd-, .mermaid- und .svg-Dateien oder exportiere PNG 1x, PNG 2x, PNG 3x und PDF.
Mermaid-Diagramme zum Schreiben
SourceCanvas konzentriert sich darauf, lesbaren Code in nützliche Diagramme zu verwandeln. Mit bekannten Diagrammnamen anfangen und nach Bedarf weitere Stile lernen.
Ablauf und Struktur
- Flowcharts / Graphen
- Sequenzdiagramme
- Klassendiagramme
- Zustandsdiagramme
- ER-Diagramme
- Requirement-Diagramme
- C4-Architekturdiagramme
Planung und Wissen
- Gantt-Charts
- Git-Graphen
- User Journeys
- Timelines
- Mindmaps
- Kanban-Boards
- Architekturdiagramme
- Event-Modeling-Diagramme
Daten und Analyse
- Kreisdiagramme
- Quadrant-Charts
- XY-Charts
- Sankey-Charts
- Radar-Charts
- Treemaps
- Info-Diagramme
Spezialdiagramme
- Paketdiagramme
- Blockdiagramme
- Baumansichten
- Ishikawa-Diagramme
- Venn-Diagramme
- Wardley Maps
Einige neuere Diagrammstile können sich weiterentwickeln; Flowcharts, Sequenzdiagramme, Gantt-Charts und Mindmaps sind gute Einstiege.
Tutorial zum Zeichnen mit Code
Diagrammcode schreiben, Modus wählen, Ergebnis prüfen und speichern oder exportieren: vier Schritte, die unten umgeschaltet werden können.
Diagrammcode schreiben oder lokale Datei öffnen
Code für Flowcharts, Sequenzdiagramme, Gantt-Charts, Mindmaps oder andere Diagrammarten in den Editor schreiben. .svg-, .mmd- und .mermaid-Dateien lassen sich direkt öffnen.
- Gut zum Lernen von Mermaid-Diagrammen aus Beispielen.
- Gut zum Pflegen von Dokumentations-Flowcharts und Architekturdiagrammen.
- macOS unterstützt Drag & Drop; iOS, iPadOS und visionOS nutzen den System-Dateieinstieg.
Auto / SVG / Mermaid verwenden
Auto erkennt den Typ aus Inhalt und Dateiendung. Bei gemischten Fragmenten oder erzwungener Darstellung kann manuell auf SVG oder Mermaid gewechselt werden.
- Auto passt für die meisten Einfüge- und Dateiabläufe.
- SVG fixiert die SVG-Darstellung.
- Mermaid nutzt den Diagramm-Renderer und zeigt Hintergrundoptionen.
Quelle und Ergebnis gemeinsam prüfen
Der Vorschaubereich zeigt den Renderstatus. Mit Zoom lassen sich Details prüfen; auf iPhone und iPad funktioniert das auch direkt per Zwei-Finger-Geste.
- Feine Linien, Knoten und Beschriftungen mit Tasten oder Touch-Gesten prüfen.
- Mermaid nutzt Papier als Standard und kann auf transparent, weiß, neblig oder dunkel wechseln.
- Ungültige Eingaben erhalten klare Rückmeldungen für schnelle Korrekturen.
Quelle speichern oder Vorschau exportieren
Wenn die Grafik stimmt, kann die Quelle im passenden Format gespeichert oder die Vorschau als PNG 1x, PNG 2x, PNG 3x oder PDF exportiert werden.
- SVG-Quellen als .svg speichern.
- Mermaid-Quellen als .mmd oder .mermaid speichern.
- Unter iOS nutzen Speichern und Export den System-Dateidialog; der Export übernimmt Grafik und Hintergrundauswahl.
Unterstützte Plattformen
Derselbe Vorschauablauf passt sich Desktop, Touchscreens und Spatial Computing an und nutzt Layouts passend zur Bildschirmgröße.
Mac: breiter Arbeitsbereich mit Tastaturfokus
Auf breiten Bildschirmen bleiben Quelle und Vorschau nebeneinander, ideal zwischen Code, Dokumenten und Designwerkzeugen.
iPad: Quellcode und Vorschau nebeneinander
Ohne linke Werkzeugleiste beschleunigen obere Befehlszone und Editor/Vorschau nebeneinander Querformatprüfungen für SVG und Mermaid.
iPhone: dreizeilige Leiste und Pinch-Zoom
Auf schmalen Bildschirmen werden Quelle und Vorschau gestapelt, während Icon-Öffnen/Speichern, Modus, Hintergrund und Zoom erreichbar bleiben.
Apple Vision Pro: große Diagrammprüfung im Raum
Diagramme und Dokumente in einem größeren Arbeitsbereich platzieren, besonders für komplexe Mermaid-Diagramme.
Für Code-Zeichnen und Diagrammlernen
SourceCanvas konzentriert sich auf Diagrammbearbeitung, Mermaid-Diagrammlernen, Flowchart-Zeichnen, Dokumentationsgrafiken, Quellspeicherung und PNG/PDF-Export.
Diagramm-Editor
Flowcharts, Sequenzdiagramme, Klassendiagramme, Gantt-Charts, Mindmaps und Timelines im Code schreiben und live sehen.
Mermaid-Diagramme lernen
Mit lesbaren Beispielen Knoten, Verbindungen, Verzweigungen, Teilnehmer, Aufgabenbereiche und Diagrammstruktur verstehen.
Dokumentation
Produktabläufe, Systemdesigns, Projektpläne und Wissensstrukturen in wartbare Diagrammquellen verwandeln.
SVG und visuelle Assets
SVG-Markup, Icons, Illustrationen und Vektorprüfungen neben dem Diagramm-Workflow behalten.
PNG/PDF-Export
Fertige Diagramme als PNG 1x, 2x, 3x oder PDF für Dokumente, Reviews, Lernmaterial und Archive exportieren.
FAQ
Kurze Antworten zu SVG, Mermaid, Dateiformaten, Datenschutz und Export.
Ist SourceCanvas kostenlos?
Diese Website zeigt die Funktionen des leichten lokalen Vorschauwerkzeugs. Tatsächliche Preise und Verfügbarkeit bitte auf der App-Store-Seite prüfen.
Lädt SourceCanvas meine Dateien hoch?
Die App ist als lokales Vorschauwerkzeug ausgelegt. Die zentrale SVG- und Mermaid-Darstellung hängt nicht von einem Remote-Renderingdienst ab. Die finale Datenschutzerklärung sollte dennoch mit der veröffentlichten App abgeglichen werden.
Welche Dateiformate werden unterstützt?
SVG, Mermaid-Quellcode und Markdown-Mermaid-Codeblöcke können eingefügt werden. Außerdem lassen sich .svg-, .mmd- und .mermaid-Dateien öffnen.
Warum lassen sich Mermaid-Hintergründe ändern?
Dokumente und Designs nutzen verschiedene Hintergründe. Transparent, weiß, papierfarben, neblig und dunkel helfen, Kontrast- und Randprobleme früher zu erkennen.
Wofür eignen sich PNG- und PDF-Export?
PNG passt für Dokumente, Tickets und Chat-Tools. PDF eignet sich für Archivierung, Reviews und vektorfreundliche Dokumentabläufe.
Was hat sich bei iOS-Speichern und Export geändert?
Das Speichern von Quellcode öffnet den System-Dateidialog. Exportoptionen heißen PNG 1x, PNG 2x, PNG 3x und PDF, damit die Ausgabeskalierung klar ist.
Eignet sich die App für Teams?
Ja. Sie passt zu Teams, die lokale Assets und Diagramme schnell prüfen müssen, besonders in Frontend-Entwicklung, Design-QA, Produktdokumentation und technischer Redaktion.