Manual of Style: Images with Drawing Elements

"Live editing" images on Zendiwiki pages

On Zendiwiki pages images with an edit option can be embedded. This is done with the following steps.

Step 1: Insert a markup snippet like the following at the point where the image is located on the page:

{{my-image.png}}

The image type must be png. If there are no very special design requirements for the wiki page, then the recommendation is to use the following markups, if necessary in a slightly modified or adapted form.

en:authors-only:zendiwiki-drawio-custom-shape-library.png

An easy way to use these markers is to import them into your draw.io scratchpad. The shapes are included in this import file: https://zendi.ph-weingarten.de/zendiwiki-drawio-image-markers.xml After saving the wiki page, the following clickable image is depicted:

Break it down:

  • drawio> creates an editable image on the Zendiwiki page.
  • my_image.png is the name of the PNG image to be created (not yet existing).

Step 2: Paste the image file into the editor and edit it.

If there are no very special design requirements for the wiki page, then the recommendation is to use the following markups, if necessary in a slightly modified or adapted form.

en:authors-only:zendiwiki-drawio-custom-shape-library.png

An easy way to use these markers is to import them into your draw.io scratchpad. The shapes are included in this import file: https://zendi.ph-weingarten.de/zendiwiki-drawio-image-markers.xml

Example:

en:authors-only:waterfall-540-editable.png

Lorem ipsum dolor sit amet.

  1. First item of the list.
  2. Second item of the list.
  3. Third item of the list.
DokuWiki Syntax:
<WRAP labeled-image-medium>

{{drawio>waterfall-540-editable.png}}

<WRAP>

Lorem ipsum dolor sit amet.

<WRAP circled-numbers-list>

  - First item of the list. 
  - Second item of the list.
  - Third item of the list.

</WRAP>
</WRAP>
</WRAP>

Step 3: Remove the drawio> prefix so that the image can no longer be edited.

Side effect: A normal PNG image is displayed without any connection to drawio.

Example:

Lorem ipsum dolor sit amet.

  1. First item of the list.
  2. Second item of the list.
  3. Third item of the list.
DokuWiki Syntax:
<WRAP labeled-image-medium>

{{waterfall-540-editable.png}}

<WRAP>

Lorem ipsum dolor sit amet.

<WRAP circled-numbers-list>

  - First item of the list. 
  - Second item of the list.
  - Third item of the list.

</WRAP>
</WRAP>
</WRAP>