Handbuch:Erweiterung/DrawioEditor

Drawio bietet umfangreiche Zeichenmöglichkeiten für Prozessflussdiagramme, Infografiken und andere Visualisierungen auf einer Wikiseite. Beschreibende Grafiken wie Organigramme oder Flussdiagramme können direkt auf einer Wikiseite erstellt werden.

Drawio-Editor einbinden

So fügen Sie ein Diagramm mit dem visuellen Editor ein:

1. Erstellen oder wählen Sie eine Seite, auf der Sie eine Zeichnung einfügen möchten.
2. Öffnen Sie das Menü Content Droplets im visuellen Editor.

   

   Diagramm Content Droplet

3. Wählen Sie das Diagramm aus der Liste der Content Droplets.
4. Klicken Sie auf Einfügen.
5. Dies öffnet ein Dialogfeld. Geben Sie einen Namen für das Diagramm ein. Unter diesem Namen wird das Diagramm im Wiki als PNG-Datei versioniert.
6. Klicken Sie auf Einfügen.

   

   drawio Einfügen-Dialog

   
   
7. Hiermit wird das Tag <drawio filename="''<nameoffile>"> in Ihren Quellcode eingefügt.
8. Speichern Sie die Seite.

Der Drawio-Editor steht nun auf Ihrer Seite zur Verfügung.

Drawio Platzhalter und "Bearbeiten" Link

Diagramm bearbeiten

Hinweis:Der Drawio-Editor wird immer über den [Bearbeiten]-Link im Ansichtsmodus der Seite geöffnet.

So bearbeiten Sie das Diagramm:

1. Klicken Sie im Ansichstmodus der Seite auf Bearbeiten, um den Drawio-Editor zu öffnen.
2. Fügen Sie die gewünschten Diagramm-Elemente hinzu.
3. Klicken Sie in Drawio auf Speichern, um Ihre Zeichnung zu speichern. Das so entstandene Diagramm wird als png-Datei im Datei-Namensraum gespeichert und bei weiteren Bearbeitungen versioniert.
4. Klicken Sie in Drawio auf Beenden, um den Drawio-Editor zu schließen.

• 
  Bearbeitungsmodus
• 
  Gespeichertes Flussdiagram

Links einfügen

So fügen Sie auf einer Form einen Link ein:

1. Öffnen Sie über Rechts-Klick das Form-Menü.
2. Klicken Sie auf Verknüpfung bearbeiten.

   

   Form-Menü

3. Geben Sie den vollen Pfad des Links an.
   Auch bei internen Wikiseiten muss der volle Pfad angegeben werden (Beispiel externer Link: https://bluespice.com, Beispiel interner Link: https://de.wiki.bluespice.com/wiki/Handbuch:Erweiterung/DrawioEditor).
   Hinweis: Das angezeigte Dropdown-Menu hat derzeit in BlueSpice keine Funktion.

   

   (1) Vollen url-Link-Pfad eingeben (2) Link kann in neuem Fenster geöffnet werden (3) Dropdown wird in BlueSpice nicht verwendet.

4. Klicken Sie Anwenden.
5. Wiederholen Sie die Schritte 1-4 für weitere Formen im Diagramm.
6. Klicken Sie Speichern.
7. Klicken Sie Beenden, um den Editor zu schließen.

Wenn Sie die Änderungen noch nicht sehen, klicken Sie F5 auf Ihrer Tastatur, um die Seite neu zu laden.

Vermeiden Sie die automatische Größenänderung von verknüpften Formen:

Standardmäßig wird die Größe von Drawio-Bildern so angepasst, dass sie immer in den Inhaltsbereich passen.

Da die Links als Kartenkoordinaten implementiert sind, kann die Größe des png Bildes nicht verändert werden, ohne die Linkgrenzen zu verletzen. Um dies zu vermeiden, können Sie die automatische Größenanpassung Ihrer drawio-Bilder mit dem folgenden css deaktivieren.

Automatische Größenanpassung für Drawio-Bilder deaktivieren

Füge die folgenden Regeln zu MediaWiki:Common.css hinzu

/*Drawio png - do not auto-resize preview images when links are added directly to the shapes */
div[id*=drawio-img-box] {
    overflow-x:scroll 
}

/*Drawio png - do not auto-resize preview images when links are created as image maps from file description page */
div[id*=drawio-img-box] img {
    height: initial;
    max-width: initial;
    width: initial;
}

Damit wird die automatische Größenanpassung aller drawio-Vorschaubilder entfernt.

Um dieses Styling nur auf einige drawio-Bilder anzuwenden, können Sie einen Wrapper zu diesen Bildern im Quelltextbearbeitungsmodus hinzufügen. Zum Beispiel:

<div class="drawio-linked">
<drawio filename="processmap" alt="Processmap showing the management, core, and supporting processes ">
</drawio>
</div>

In diesem Fall fügen Sie die oben genannten Formatierungen nicht in Ihre Common.css ein, sondern verwenden stattdessen diese Regeln:

/*Drawio png - do not auto-resize drawio diagrams that are wrapped in a container with class drawio-linked */
.drawio-linked {
    overflow-x:scroll 
}

.drawio-linked img {
    height: initial!important;
    max-width: initial!important;
    width: initial!important;
}

PNG und SVG Format

In BlueSpice werden Drawio-Diagramme immer im PNG-Format gespeichert. Das Erstellen von SVG-Formaten ist nicht möglich.

Import von bestehenden Diagrammen

Visio-Diagramme

Dateien mit der Endung .vsdx können Sie direkt in Drawio importieren und weiter bearbeiten. Erstellen Sie hierzu auf einer Seite ein leeres Drawio-Diagramm. Speichern Sie das leere Diagramm und gehen Sie dann in den Bearbeitungs-Modus. Dort wählen Sie Datei > Importieren von > Gerät. Anschließend können Sie das importierte Diagramm bearbeiten.

Weiterführende Links

• draw.io support
• mediawiki.org/wiki/Extension:DrawioEditor
• Referenz:DrawioEditor
• Anja Ebersbach, draw.io für MediaWiki und BlueSpice - Kollaborativ erstellte Zeichnungen, BlueSpice News & KnowHow vom 13. Februar 2020. (german)

Technische Referenz: DrawioEditor

PDF-Ausschluss - Start

---

Feedback zur Dokumentation ist im Community-Forum möglich.

PDF-Ausschluss - Ende

Tag: XML-Tags, welche beliebig parametrisiert werden können und eine vom Programmierer gewünschte Ausgabe produzieren. Fügt man beispielsweise das <bs:bookshelf>-Tag ein, dann erhält der Artikel die Kapitelnavigation des PDF-Buches, in dem der Artikel verlinkt ist.

Im Wiki abgetrennter Bereich, dessen Inhalte über spezielle Berechtigungen gelesen und bearbeitet werden können. Einen Namensraum erkennt man an einem Präfix vor dem Artikeltitel.