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
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.
<drawio filename="<nameoffile>">in your source code.
- Save the page.
The drawio editor is now available on the page.
Editing the diagram
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.
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
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
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.