Diagrammsystem

4 min read

Erstellen Sie Flussdiagramme, UML-Diagramme, Netzwerkdiagramme und verbinden Sie alle visuellen Elemente mit intelligenten Verbindern.

Diagramm-Flowchart

Übersicht

Das Diagrammsystem bietet:

  • Diagram Shapes - Flussdiagramm, UML und Netzwerksymbole
  • Smart Connectors — Auto-Routing-Pfeile, die aktualisiert werden, wenn sich Formen bewegen
  • Alles verbinden - Verknüpfen Sie alle Canvas-Elemente (Bilder, Text, Formen, SVGs)
  • Auto-Layout — Diagramme automatisch anordnen

Zugriff auf das Diagram Panel

  1. Klicken Sie auf die Schaltfläche Diagramm in der linken Symbolleiste
  2. Das Diagrammfeld öffnet sich und zeigt verfügbare Formen an

Diagram Panel

Erstellen von Diagrammformen

Aus dem Panel

  1. Öffnen Sie das Diagram Panel
  2. Wählen Sie eine Shape-Kategorie (Flowchart, UML, Network, Basic)
  3. Klicken Sie auf ein Shape, um es der Canvas hinzuzufügen
  4. Ziehen in Position

Formenkategorien

Kategorie Formen Verwendung für
Flussdiagramm Prozess, Entscheidung, Terminal, Daten, Dokument, Datenbank Flussdiagramme, Workflows
UML Klasse, Use Case, Schauspieler Softwarediagramme
Netz Cloud, Server Architekturdiagramme
Grundlegend Rechteck, Kreis, Dreieck, Stern Allgemeine Zwecke

Verbindungselemente

Quick Connect (Beliebige Elemente)

  1. Wählen Sie das Source Item
  2. Halten Sie Shift und klicken Sie auf das Zielelement
  3. Ein Connector wird automatisch erstellt

Mit dem Connect Mode

  1. Klicken Sie im Diagrammfeld auf Connect (oder drücken Sie C)
  2. Klicken Sie auf den Port des Quellelements (blauer Kreis)
  3. Drag zum Port des Zielobjekts
  4. Release zum Erstellen der Verbindung

Connect Anything

Funktioniert mit jedem Element

Steckverbinder sind nicht auf Diagrammformen beschränkt. Anschluss:

  • Bilder und importierte SVGs
  • Textelemente
  • Benutzerdefinierte Formen (Kreise, Sterne, Rechtecke)
  • Generatorgenerierte Elemente

Steckverbinder

Routingstile

Stil Beschreibung Am besten für
Direkt Geradeauslinie Einfache Verbindungen
Orthogonal Rechtwinklige Bahnen Technische Diagramme
Gebogen Glatte Bezierkurven Organische Layouts

Arrowhead Styles

Stil Aussehen
Klassisch Gefülltes Dreieck
Stealth Diamant mit Kerbe
Scharfe Länglicher Punkt
Offen V-förmiger Umriss
Diamant Diamantform
Kreis Gefüllter Kreis
Keine Keine Pfeilspitze

Connector Styles

Auto-Layout

Ordne dein Diagramm automatisch an:

  1. Wählen Sie die zu arrangierenden Formen aus (oder wählen Sie keine für alle)
  2. Klicken Sie auf Auto-Layout im Diagrammfeld
  3. Wählen Sie einen Layout-Algorithmus

Layouttypen

Layout Beschreibung Am besten für
Hierarchisch Schichtweise von oben nach unten Flussdiagramme, Organigramme
Baum Eltern-Kind-Hierarchie Stammbäume, Dateistrukturen
Radial Konzentrische Kreise Mind Maps
Netz Regelmäßiges Netz Bestände, Galerien
Kraftgerichtet Physikbasiert Netzdiagramme

Auto Layout

Diagrammbeispiele

Flussdiagramm

Flowchart

Ein einfaches Prozessflussdiagramm mit:

  • Terminalformen für Start/Ende
  • Prozessformen für Aktionen
  • Entscheidungsdiamant für Bedingungen
  • Orthogonale Verbinder

Netzdiagramm

Netzwerkdiagramm

Eine Netzwerkarchitektur, die Folgendes zeigt:

  • Cloud Shape für das Internet
  • Serverformen für die Infrastruktur
  • Gestrichelte Steckverbinder für interne Verbindungen

UML Use Case

UML Diagramm

Anwendungsfalldiagramm mit:

  • Schauspielerstabfigur
  • Anwendungsfallellipsen
  • Zuordnungssteckverbinder

Animierte Verbinder

Fügen Sie den “Bolt”-Effekt für den animierten Fluss hinzu:

  1. Wählen Sie einen Connector
  2. Aktivieren Sie Bolt-Effekt in Eigenschaften
  3. Einstellungen anpassen:
    • Farbe — Farbe des Bolzens
    • Geschwindigkeit — Animationsgeschwindigkeit
    • Größe — Bolzengröße

Der Bolzen bewegt sich entlang des Verbinders und zeigt die Datenflussrichtung an.

Tipps

Diagramm Tipps:

  • Verwenden Sie orthogonales Routing für technische Diagramme
  • Verwenden Sie gekrümmtes Routing für organische Mind-Map-Stile
  • Apply Auto-Layout nach dem Hinzufügen aller Formen
  • Halten Sie Shift beim Ziehen für Snap-to-Grid

Tastenkürzel

Schlüssel Aktion
C Einschaltmodus
Escape Exit-Connect-Modus
Delete Ausgewählte Steckverbindung/Form löschen