|
|
| Line 1: |
Line 1: |
| <bookshelf src="Book:User manual" />
| | { |
| {{DISPLAYTITLE:Drawio}}
| | "social-profile-title": null, |
| | | "social-profile-name": null, |
| '''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.
| | "social-profile-email": null, |
| ==Embedding the Drawio editor==
| | "social-profile-department": "", |
| '''To insert a drawing in the [[Manual:Extension/VisualEditor|visual editor]]:'''
| | "social-profile-function": "", |
| | | "social-profile-location": "", |
| #'''Create or choose''' a page where you want to insert a drawing.
| | "social-profile-phone": "", |
| #'''Select''' ''Insert > Magic word'' from the editor toolbar.[[File:Manual:VE-insert-magicword.png|alt=Insert Magic word|center|thumb|300x300px|Insert ''Magic word'']]
| | "description": "", |
| #'''Choose''' ''drawio'' from the list of magic words.[[File:DrawioEditor drawio magic word.png|alt=Magic word "drawio"|center|thumb|450x450px|Magic word "drawio"]]
| | "parentid": 0, |
| #'''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.
| | "id": 442, |
| #'''Click''' ''Insert.'' [[File:drawio-dialog.png|link=https://en.wiki.bluespice.com/wiki/File:drawio-dialog.png|alt=drawio dialog|center|450x450px]]This inserts the tag <code><nowiki><drawio filename="<nameoffile>"></nowiki></code> in your source code.
| | "ownerid": 29, |
| #'''Save''' the page.
| | "type": "profile", |
| The drawio editor is now available on the page.
| | "archived": false, |
| [[File:DrawioEditor placeholder.png|alt=Drawio placeholder and [Edit] link|center|thumb|600x600px|Drawio placeholder and [Edit] link]]
| | "tags": [ |
| | | "User:Mgaehl" |
| | | ], |
| == Editing the diagram==
| | "resolved": false |
| {{Messagebox|boxtype=note|icon=|Note text=To open the drawio editor, you always click on the ''[Edit]'' link in '''page view mode'''.|bgcolor=}}
| | } |
| '''To edit the diagram:'''
| |
| #'''Click''' ''Edit'' on the saved page next to the drawio placeholder or your already saved diagram. [[File:800px-drawio-processchart.png|alt=draw.io chart|center|thumb|432x432px|the open drawio editor]]
| |
| #'''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 ===
| |
| '''To add a link to a shape:'''
| |
| | |
| # '''Right-click''' to open the shape menu.
| |
| # '''Click''' Edit Link.[[File:DrawioEditor shape menu.png|alt=Shape menu|center|thumb|650x650px|Shape menu]]
| |
| # '''Provide''' the full path of the link. <br />The full path must also be specified for internal wiki pages (example external link: <nowiki>https://bluespice.com</nowiki>, example internal link: <nowiki>https://de.wiki.bluespice.com/wiki/Manual:Extension/DrawioEditor</nowiki>). <br />'''Note:''' The displayed dropdown menu currently has no function in BlueSpice.[[File:DrawioEditor edit link.png|alt=annotated screenshot of the "edit link" dialog|center|thumb|500x500px|(1) Enter full url link path (2) Link can be opened in new window (3) Dropdown is not used 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 ==
| |
| ===Visio diagrams===
| |
| [[File:750px-drawio-import_vsdx.png|alt=Importing a .vsdx file|center|thumb|565x565px|Importing a .vsdx file]]
| |
| 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.<br />
| |
| | |
| {{Box Links-en
| |
| |Topic1=[https://diagrams.net/ draw.io Website]
| |
| |Topic2=[[mw:Extension:DrawioEditor|mediawiki.org/wiki/Extension:DrawioEditor]]
| |
| |Topic3=[[Reference:DrawioEditor]]
| |
| |Topic4=Anja Ebersbach, [https://bluespice.com/draw-io-for-mediawiki-and-bluespice/ draw.io für MediaWiki und BlueSpice], BlueSpice News & Know How, February 13 2020.
| |
| }}
| |
| [[en:{{FULLPAGENAME}}]]
| |
| [[de:Handbuch:Erweiterung/DrawioEditor]]
| |
| [[Category:Editing]]
| |
Discussions