Drawio offers extensive drawing possibilities for process flowcharts, infographics and other visualizations on a wiki page. Descriptive graphics like process chains or decision trees can be constructed directly on a wiki page.
Embedding the Drawio editor[edit | edit source]
To insert a drawing in the visual editor:
- Create or choose a page where you want to insert a drawing.
- Select Insert > Magic word from the editor toolbar.
- Choose drawio from the list of magic words.
- Click Done. This opens a dialog box. Enter a name for your drawing. This name is used to version your diagram as a PNG file in the wiki.
- Click Insert. This inserts the tag
<drawio filename="<nameoffile>">
in your source code. - Save the page.
The drawio editor is now available on the page.
Editing the diagram[edit | edit source]
To edit the diagram:
- Click Edit on the saved page next to the drawio placeholder or your already saved diagram.
- Add any needed shapes to your diagram.
- Click Save in the drawio window to save your drawing.
- Click Exit next to the Save button to close the editor.
Adding links to shapes[edit | edit source]
To add a link to a shape:
- Right-click to open the shape menu.
- Click Edit Link.
- Provide the full path of the link.
The full path must also be specified for internal wiki pages (example external link: https://bluespice.com, example internal link: https://de.wiki.bluespice.com/wiki/Manual:Extension/DrawioEditor).
Note: The displayed dropdown menu currently has no function in BlueSpice. - Click Apply.
- Repeat steps 1-4 for other shapes in the diagram.
- Click Save.
- Click Exit to close the editor.
If you don't see the changes yet, click F5 on your keyboard to refresh the page.
PNG and SVG format[edit | edit source]
In BlueSpice, drawio diagrams are always saved in PNG format. It is currently not possible to save diagrams in SVG format.
Import of existing diagrams[edit | edit source]
Visio diagrams[edit | edit source]
You can import files with the extension .vsdx directly into the drawio editor and edit them further. To do this, create a diagram on a wiki page. In the drawio editor, choose File> Import From> Device. You can then edit the imported diagram.