Keine Bearbeitungszusammenfassung
Markierung: Quelltext-Bearbeitung 2017
Laetitia Huyghe (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
Markierung: Quelltext-Bearbeitung 2017
Zeile 8: Zeile 8:
==Drawio-Editor einbinden==
==Drawio-Editor einbinden==
'''So fügen Sie ein Diagramm mit''' '''dem''' '''[[Handbuch:Erweiterung/VisualEditor|visuellen Editor]] ein:'''
'''So fügen Sie ein Diagramm mit''' '''dem''' '''[[Handbuch:Erweiterung/VisualEditor|visuellen Editor]] ein:'''
#'''Erstellen oder wählen''' Sie eine Seite, auf der Sie eine Zeichnung einfügen möchten.
#'''Erstellen oder wählen''' Sie eine Seite, auf der Sie eine Zeichnung einfügen möchten.
#'''Wählen''' Sie ''Einfügen > Magisches Wort'' im visuellen Editor '''aus'''.[[Datei:Handbuch:VE-insert-magicwordDE.png|alternativtext=Magisches Wort einfügen|zentriert|mini|200x200px|Magisches Wort einfügen]]<br />
#'''Öffnen''' Sie das Menü ''Content Droplets'' im visuellen Editor.
#'''Wählen''' Sie das magische Wort ''drawio''.[[Datei:DrawioEditor magicword.png|alternativtext=Magisches Wort "drawio" einfügen|zentriert|mini|450x450px|Magisches Wort "drawio" einfügen]]
#[[Datei:Handbuch:Handbuch Erweiterung DrawioEditor 1748351554066.png|alternativtext=Diagramm Content Droplet und Auswahl des Diagramms|zentriert|mini|400x400px|Diagramm Content Droplet]]
#'''Klicken''' Sie '''auf''' ''Fertig''. 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.[[Datei:drawio.png|zentriert|500x500px|mini|draw.io auf der Seite einbinden|]]
#'''Wählen''' Sie das Diagramm aus der Liste der Content Droplets.
#'''Klicken''' Sie '''auf''' ''Einfügen.''<br />
#'''Klicken''' Sie '''auf''' ''Einfügen''.  
Hiermit wird das Tag  <code><nowiki><drawio filename="''<nameoffile></nowiki>''">''</code>'' in Ihren Quellcode eingefügt.''
#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.
#'''Klicken''' Sie '''auf''' ''Einfügen.''
#[[Datei:Handbuch:Handbuch Erweiterung DrawioEditor 1748351797076.png|alternativtext=drawio Einfügen-Dialog|zentriert|mini|drawio Einfügen-Dialog]]<br />
# Hiermit wird das Tag  <code><nowiki><drawio filename="''<nameoffile></nowiki>''">''</code>'' in Ihren Quellcode eingefügt.''
#'''Speichern''' Sie die Seite.
#'''Speichern''' Sie die Seite.
Der Drawio-Editor steht nun auf Ihrer Seite zur Verfügung.
Der Drawio-Editor steht nun auf Ihrer Seite zur Verfügung.
[[Datei:DrawioEditor Platzhalter.png|alternativtext=Drawio Platzhalter und "Bearbeiten" Link|zentriert|mini|550x550px|Drawio Platzhalter und "Bearbeiten" Link]]
[[Datei:DrawioEditor Platzhalter.png|alternativtext=Drawio Platzhalter und "Bearbeiten" Link|zentriert|mini|550x550px|Drawio Platzhalter und "Bearbeiten" Link]]
== Diagramm bearbeiten ==
== Diagramm bearbeiten ==
{{Hinweisbox|boxtype=Hinweis|icon=|Note text=Der Drawio-Editor wird immer über den [Bearbeiten]-Link im '''Ansichtsmodus''' der Seite geöffnet.|bgcolor=}}
{{Hinweisbox|boxtype=Hinweis|icon=|Note text=Der Drawio-Editor wird immer über den [Bearbeiten]-Link im '''Ansichtsmodus''' der Seite geöffnet.|bgcolor=}}

Version vom 27. Mai 2025, 13:18 Uhr

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[Bearbeiten | Quelltext bearbeiten]

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.
  3. Diagramm Content Droplet und Auswahl des Diagramms
    Diagramm Content Droplet
  4. Wählen Sie das Diagramm aus der Liste der Content Droplets.
  5. Klicken Sie auf Einfügen.
  6. 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.
  7. Klicken Sie auf Einfügen.
  8. drawio Einfügen-Dialog
    drawio Einfügen-Dialog

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

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

Drawio Platzhalter und "Bearbeiten" Link
Drawio Platzhalter und "Bearbeiten" Link

Diagramm bearbeiten[Bearbeiten | Quelltext 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.

Links einfügen[Bearbeiten | Quelltext bearbeiten]

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ü
    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.
    Scfeenshot des Link-Dialogs
    (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.

PNG und SVG Format[Bearbeiten | Quelltext bearbeiten]

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

Import von bestehenden Diagrammen[Bearbeiten | Quelltext bearbeiten]

Visio-Diagramme[Bearbeiten | Quelltext bearbeiten]

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



PDF-Ausschluss - Start

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

PDF-Ausschluss - Ende