Diagramme und Flussdiagramme

Diagramme sind leistungsstarke Werkzeuge, die Teams dabei helfen können, komplexe Systeme zu kartieren, komplizierte Hierarchien darzustellen, Ideen zu organisieren, Websites zu strukturieren, Implementierungen zu planen und Benutzerabläufe zu gestalten.

Sie sind für den Erfolg jedes Projekts unerlässlich – und ein wesentlicher Bestandteil des Rhythmus und Ablaufs eines Projekts in jeder Phase der Entwicklung und Implementierung. Und während sich Projekte weiterentwickeln, benötigen Teams aktuelle Diagramme und Flussdiagramme unmittelbar zur Hand – zur Referenz, Orientierung und Dokumentation.

In der Schablonenbibliothek finden Sie eine breite Palette von Flussdiagramm-, UML-, Use-Case- und ERD-Modell-Diagrammschablonen, die alle so konzipiert sind, dass sie schnell mit unseren smarten Verbindern verbunden werden können.

In diesem Artikel erklären wir jede unserer Diagrammschablonen-Kategorien. Wir zeigen Ihnen auch, wie Sie Diagrammschablonen zur Seite hinzufügen und wie Sie deren Verbinder befestigen, formatieren und beschriften.

Schließlich lernen Sie einige Tipps und Tricks, wie das Austauschen einer Diagrammschablone gegen eine andere oder das Erweitern von Abläufen mit einem schnellen Klick auf die Erweiterungs-Pfeile.

Diagrammschablonen-Kategorien

In der Schablonenbibliothek finden Sie vier Kategorien von Diagrammschablonen. Mit ihnen kann Ihr Team jede Art von Diagramm erstellen und improvisieren:

Flussdiagramme

Flussdiagramme sind die flexibelsten und anpassungsfähigsten Diagrammschablonen. Sie werden typischerweise für Brainstorming und Ideenfindung, Informationsarchitektur, Datenverwaltung, Geschäftsprozessmodellierung, Strukturanalyse, Prozessingenieurwesen und mehr verwendet.

UML

UML-Diagramme verwenden die Unified Modeling Language, um Teams dabei zu helfen, die Struktur und das Verhalten von Software-Lösungen zu verstehen. Sie visualisieren die Komponenten und Interaktionen eines Systems, indem sie dessen Objekte, Akteure, Attribute, Operationen und Beziehungen dokumentieren.

Use Case

Use-Case-Diagramme modellieren die Menge von Aktionen, Diensten und Funktionen, die ein System ausführen muss. Indem sie die spezifischen Use Cases, Akteure und Ziele eines Szenarios veranschaulichen, helfen diese Verhaltensdiagramme Teams dabei, die funktionalen Anforderungen und den Umfang eines Systems zu verstehen.

ERD-Modell

Ein Entity-Relationship-Diagramm stellt die Struktur einer Datenbank dar, indem es zeigt, wie Entitäten darin – Personen, Rollen, Objekte, Produkte oder Konzepte – miteinander in Beziehung stehen. Das Diagramm stellt die Entitäten, Attribute und miteinander verbundenen Beziehungen innerhalb des Geltungsbereichs dieses Systems dar.

Um Beispiele all dieser Diagrammtypen zu sehen, schauen Sie sich unsere Sammlung kostenloser, kuratierter Diagramme & Flussdiagramm-Vorlagen an. Verwenden Sie diese Beispiele, um Ihr Projekt zu starten, Best Practices zu verstehen oder einfach zu experimentieren.

Diagrammschablonen hinzufügen, gestalten und benennen

Genau wie alle Moqups-Schablonen können Sie Diagrammschablonen per Einzelklick oder Drag-and-Drop als Objekte zur Seite hinzufügen. Und, wie bei anderen Objekttypen, können Sie sie mit dem Format-Panel gestalten.

Wenn Sie Text in eine Diagrammschablone eingeben, übernehmen diese Schablonen automatisch den Text als ihren Namen. Dies erleichtert die Identifikation bestimmter Diagrammelemente im Gliederungs-Panel, insbesondere in komplexen Ablauf- und Prozessdiagrammen.

Verbinder im Diagrammmodus befestigen

Unsere smarten Verbinder können verwendet werden, um jedes Moqups-Objekt, jede Schablone oder jedes Bild zu verbinden – nicht nur unsere dedizierten Diagrammschablonen!

Um zwei beliebige Objekte auf der Seite zu verbinden:

1. Aktivieren Sie den Diagrammmodus, indem Sie auf die Diagramm-Schaltfläche in der oberen Symbolleiste klicken oder D drücken.
2. Sie sehen sofort Gruppen von hellblauen Punkten (Verbindungspunkte) an den Rändern der Objekte auf der Seite.
3. Klicken Sie auf einen dieser Punkte und ziehen Sie den Cursor zum zweiten Objekt.
4. Wenn sich der Verbinder dem zweiten Objekt nähert, rastet er ein und „haftet" – was zeigt, dass er befestigt ist. Sie können ihn mit einem der Verbindungspunkte oder an einer anderen Stelle am Rand des Objekts verbinden. Die Verbinder bleiben befestigt, auch wenn Sie Objekte verschieben, in der Größe ändern oder drehen.
5. Um den Diagrammmodus zu beenden, klicken Sie auf eine leere Fläche auf der Seite oder drücken Sie D oder Esc.

Verbinder formatieren

Verbinder können verwendet werden, um jedes Moqups-Objekt zu verbinden, aber sie sind so konzipiert, dass sie – in Kombination mit unseren Diagrammschablonen – verwendet und gestaltet werden. Neue Verbinder übernehmen den Stil des zuletzt auf dieser Seite verwendeten Verbinders.

Sie können Verbinder im Bearbeitungsmodus formatieren, entweder einzeln oder als Auswahl. Das Klicken auf einen beliebigen Verbinder öffnet den Abschnitt Verbinderstil des Format-Panels.

Wenn Sie einen einzelnen Verbinder auswählen, wird der Name dieses Verbinders oben im Panel angezeigt. Dies erleichtert das Auffinden und Identifizieren dieses Verbinders im Gliederungs-Panel.

Wenn Sie mehrere Verbinder auswählen, zeigt das Panel die Anzahl der Verbinder in dieser Gruppe an, um Ihnen zu helfen, Ihre Auswahl zu bestätigen, bevor Sie Stiländerungen oder Transformationen anwenden.

Sie können die Farbe, Breite, den Konturstil Ihres Verbinders festlegen und aus einer Reihe von Linienstilen wählen (orthogonal, orthogonal abgerundet, gebogen oder gerade). Sie können auch aus einer Reihe von Start- und Endmarkierungen wählen, die Transparenz des Verbinders anpassen und sowohl Schlagschatten als auch Weichzeichner hinzufügen.

Sofern Sie keine Änderung vornehmen, werden alle Verbinder, die Sie zukünftig zeichnen, diese Stileinstellungen übernehmen.

Verbinder beschriften

Eine wesentliche Komponente für die Diagrammerstellung ist die Möglichkeit, Beschriftungen direkt an Verbindungslinien hinzuzufügen. Dies ist besonders wichtig für Workflow-Diagramme, in denen Sie möglicherweise Ja- oder Nein-Entscheidungen angeben müssen. Beschriftungen sind auch nützlich, um Verbindungslinien in komplexen Diagrammen zu kennzeichnen, was es einfacher macht, sie zu identifizieren und zu navigieren.

Um eine oder mehrere Beschriftungen zu einem Verbinder hinzuzufügen, doppelklicken Sie einfach auf die Verbindungslinie. Und sobald Sie eine Verbinderbeschriftung hinzugefügt haben, bleibt sie automatisch an dieser Linie befestigt – und passt sich intelligent an, wenn Sie Ihr Diagramm ändern und aktualisieren.

Und Sie können Ihre Beschriftungen schnell wiederverwenden, indem Sie sie klonen. Kopieren und einfügen, oder ziehen Sie eine Beschriftung einfach, während Sie die Alt/Option-Taste gedrückt halten – genau wie bei jedem anderen Moqups-Objekt.

Wir haben auch eine großartige Funktion entwickelt, um Ihren Workflow zu beschleunigen: Die Möglichkeit, Beschriftungen zu lösen und neu zu verbinden. Klicken Sie einfach auf eine Beschriftung und ziehen Sie sie von einer Linie weg; die Beschriftung wird automatisch abgelöst und, wenn Sie sie auf eine andere Linie zuziehen, rastet sie nahtlos und intelligent ein.

Diagramm-Erweiterungen

Diagramm-Erweiterungen machen das Erweitern Ihrer Abläufe so einfach wie einen Tastendruck, und sie funktionieren mit allen Diagrammschablonen.

Die Auswahl einer beliebigen Diagrammschablone auf der Seite zeigt Pfeile auf allen vier Seiten dieser Objekte an. Das Klicken auf einen beliebigen Pfeil dupliziert dieses Objekt, verbindet sie automatisch und öffnet dann den Textbearbeitungsmodus des neuen Objekts zur schnellen Umbenennung.

Wenn sich eine entsperrte Diagrammschablone unmittelbar neben der zu „erweiternden" befindet, verbindet das Klicken auf die Erweiterungen diese beiden Objekte automatisch. Andernfalls erstellt die Erweiterung ein neues Diagrammobjekt.

Haftende Container

Innerhalb der Kategorie Flussdiagramme wird die Container-Schablone verwendet, um Prozess- und Swimlane-Diagramme zu erstellen und Objekte in Netzwerkdiagrammen zu gruppieren.

Aufgrund seiner spezifischen Anwendungsfälle hat der Container einige einzigartige Formatierungsfunktionen: Haftfähigkeit und Ausrichtung.

Container-Haftfähigkeit

Die Container-Schablone ist standardmäßig haftend – auf drei verschiedene Weisen! Sie können…

1. Den Container verwenden, um bereits auf der Seite vorhandene Objekte aufzunehmen
2. Objekte aus der Schablonenbibliothek oder Seite zum Container hinzufügen
3. Den Magneteffekt verwenden, um mehrere Container zusammenzuverbinden

Sobald Objekte in einem Container erfasst oder hinzugefügt wurden, bewegen sie sich mit diesem Container. Dies erleichtert das Gruppieren und Organisieren des Inhalts Ihres Diagramms.

Sie können die Haftfähigkeit eines Containers im Abschnitt Haftverhalten des Format-Panels ein- und ausschalten.

Container-Ausrichtung

Wenn Sie einen Container zur Seite hinzufügen, können Sie seine Ausrichtung – vertikal oder horizontal – im Abschnitt Container-Ausrichtung des Format-Panels wählen.

Sie können Container verwenden, um jede Art von Objekt aus beliebigen Gründen zu gruppieren und zu organisieren – tatsächlich ermutigen wir Sie zum Improvisieren – aber es gibt drei primäre Anwendungsfälle, die es hier zu erwähnen gilt:

Prozessdiagramme

Verwenden Sie Container, um Swimlanes und Pools für alle Arten von Prozessdiagrammen zu erstellen – um Verantwortungsbereiche abzugrenzen und zu verdeutlichen, wer was tut.

Netzwerkdiagramme

Container ermöglichen Ihrem Team, verwandte Komponenten zu identifizieren, zu gruppieren und zu beschriften, während Sie jede Art von komplexem Netzwerk kartieren.

Kanban-Boards

Container sind hervorragend für den Aufbau von Kanban-Boards geeignet, die agilen Teams dabei helfen, ihren Workflow zu visualisieren, zu verwalten, zu analysieren und zu optimieren.

Diagrammschablonen ersetzen

Sie können Diagrammschablonen, die bereits Teil eines Diagramms auf der Seite sind, schnell aktualisieren und ersetzen. Um eine Schablone auszutauschen, ziehen Sie die neue Schablone einfach über eine vorhandene und lassen Sie los, wenn das „Ersetzen"-Symbol erscheint.

Das Ersetzen funktioniert bei allen Flussdiagramm-Schablonen und bei ausgewählten Use-Case-Schablonen, wo es angemessen ist.

Listen und CSV-Daten im Diagrammformat einfügen

Unsere Funktion Im Format einfügen macht es einfach, Ihre Listen und Daten in sofort befüllte Flussdiagramme umzuwandeln:

1. Kopieren Sie eine Liste oder CSV von Ihrem Desktop
2. Verwenden Sie Strg/Cmd + V, um diese Daten auf Ihrer Moqups-Seite einzufügen
3. Klicken Sie auf die Schaltfläche Flussdiagramm im Modal Format auswählen