Table of Contents
diagrams Plugin
Compatible with DokuWiki
- 2024-02-06 "Kaos" unknown
- 2023-04-04 "Jack Jackrum" yes
- 2022-07-31 "Igor" no
- 2020-07-29 "Hogfather" unknown
Similar to diagramsnet, drawio
Installation
Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.
Usage
This plugin lets users create and edit diagrams in DokuWiki. It provides an integration with the online diagramming tool diagrams.net, previously known as draw.io.
Diagram Storage Modes
The plugin provides two different ways to store the resulting diagrams:
- mediafile mode When using this mode, diagrams are saved as SVG images as regular media files. That means storing older versions of files and applying ACL permissions for editors happens on a per diagram basis. The same diagram can be used on many pages. This is enabled by default.
- embed mode When using this mode, the actual SVG code is embedded directly into a wiki page using the
<diagram>
syntax. Editing a diagram always edits the page it is embedded on (creating a new page version) and ACLs match that of the page.
Which modes are available to your users is configured in the plugin's configuration settings.
Please note that diagrams can not easily be transferred from one mode to the other.
Create a diagram
Creating a diagram differs depending on the used storage mode:
- mediafile mode Diagrams are created in the media manager, either the fullscreen version or the media manager popup window. Just select the right namespace and click on the
Create diagram
link. Next, enter the file name for the diagram in the dialog that appears. Do not use any special characters here. You will be redirected to diagrams.net where you can create your diagram. Clicking on theSave
button will take you back to your wiki. - embed mode A new toolbar button allows you to insert a new diagram. Clicking the button will open the diagrams.net Editor and when saving the diagram is inserted at the current cursor position.
Insert a diagram
- mediafile mode Diagrams are inserted using the standard Image syntax
- embed_mode Additional parameters for the toolbar button inserted
<diagram>
syntax can be used. Alignment can be picked via theleft
,right
andcenter
keywords. Sizes can be given aswidthxheight
in pixels. Eg.<diagram center 300x200>
.
Edit a diagram
Existing diagrams can always be edited from viewing a page that uses the diagram. The diagram will have a “Edit Diagram” button if the current user has the appropriate permissions to edit the diagram. This works for both storage modes.
Depending on the storage mode, edits can also happen elsewhere:
- mediafile mode In the fullscreen media manager in the
View
tab, an “Edit Diagram” button will be displayed when a diagram image is selected - embed mode When editing a page, the cursor can be positioned on the syntax of an embedded diagram, clicking the toolbar button will then edit this existing diagram instead of creating a new one
Prosemirror Support
This plugin support the Prosemirror WYSIWYG Plugin for both modes. New diagrams can be inserted via the toolbar. Diagrams are shown within the editor (interactive mechanisms like links are disabled in the editor) on click their properties can be changed and the diagram editor can be opened.
PNG Caching
The plugin works with SVGs by default. However SVGs created by diagrams.net use certain features (most notably multiline and formatted texts) that only work, when the SVG is displayed in a Webbrowser. This means that those features will be lost when exporting to PDF using the dw2pdf Plugin. Please note that this is not true when using the browser's “Print to PDF” mechanism.
To work around this, the Plugin can optionally save a PNG based cache file for each diagram on saving and use that cache file when exporting to PDF. Enable the pngcache
option in the configuration of the plugin to enable it. Please note that only diagrams saved after enabling this option will have PNG cache file. You will need to resave your existing diagrams to make use of that feature.
Comparison
This plugin was inspired by a few other plugins that integrate diagrams.net/draw.io into DokuWiki. Below you can find a small feature comparison.
diagrams (this one) | diagramsnet | drawio | |
---|---|---|---|
Format | SVG (PNG optional for PDF Exports) | PNG | PNG (SVG with additional Plugin) |
Storage | mediafile, embed | mediafile | mediafile |
Links in Diagrams | ✅ yes | ❌ no | ❌ no |
Custom Diagrams Host | ✅ yes | ✅ yes | ✅ yes |
Draft saving for Diagrams | ❌ no | ❌ no | ✅ yes |
PDF Export | ✅ yes | ✅ yes | ✅ yes |
ODT Export | ❌ no | ❌ no | ❌ no |
Development
The source code of the plugin is available at GitHub: cosmocode/dokuwiki-plugin-diagrams.
Changes
- Merge pull request #59 from dokuwiki-translate/lang_update_1055_17386… (2025-02-04 09:58)
- translation update (2025-02-04 00:50)
- Merge pull request #53 from dokuwiki-translate/lang_update_777_170430… (2024-01-08 15:33)
- translation update (2024-01-03 18:50)
- Version upped (2023-12-14 23:50)
- Less restrictive check if SVG is a diagram (2023-12-14 12:48)
- Version upped (2023-12-06 23:50)
- Fix links in diagrams (again) (2023-12-06 15:11)
Bug reports and feature requests
Please refer to the Issue Tracker for reporting issues.