Plugin: createMondrianViewURL¶

The purpose of this plugin is to create a wellformed URL to a draw.io file which you want to view in the Mondrian Diagrams Viewer.

Setup¶

To use the plugin you need to do the following:

Install mkdocs-macros-plugin¶

Install the plugin:

pip install mkdocs-macros-plugin

Declare the plugin in mkdocs.yml:

plugins:
    - search
    - macros

Add the Python Module¶

Add the following file to the root folder of the MKDocs folder:

• main.py

Add a variable mondrianDiagramsViewer, referencing the Mondrian Diagrams application, to the extra section in mkdocs.yml:

extra:
    mondrianDiagramsViewer: 'https://diagrams.mondrian.it.io'

Add javascript files¶

Add the following files to the docs/_baseSiteAssets/javascripts/ folder:

• docs/_baseSiteAssets/javascripts/pako.min.js
• docs/_baseSiteAssets/javascripts/mondrianDiagramViewer.js

Add the files as extra_javascript in mkdocs.yml:

extra_javascript:
  - _baseSiteAssets/javascripts/pako.min.js
  - _baseSiteAssets/javascripts/mondrianDiagramViewer.js

Usage¶

To use the plugin include the follwing function in a markdown file:

Include a YAML header in the file¶

---
# YAML header
render_macros: true
---

This will instruct the macro plugin to execute macro's defined on this page. This is done to prevent from coliding with code blocks that may include the same start and end markers.

Include one or more URLs to Mondrian Diagrams**¶

{{ createMondrianViewURL(url, title) }}

The url needs to refer to a wellformed draw.io file. This can both be an absolute path (https://...) or relative path (../myPath/myfile.drawio).

The title is optionally. If specified it is used as the name of the link, if it is not specified the url is used as title.

This function will perform the following steps:

1. Retrieve the file specified at the url
2. Encode the file so that it can be served via URL to the Mondrian Diagrams Viewer
3. Create a wellformed link in Mark Down

Examples¶

Example File

{{ createMondrianViewURL('GitLab.drawio', 'Example File')}}

GitLab.drawio

{{ createMondrianViewURL('GitLab.drawio')}}

exampleDiagrams/GitLab.drawio

{{ createMondrianViewURL('exampleDiagrams/GitLab.drawio') }}

../diagrams/exampleDiagrams/GitLab.drawio

{{ createMondrianViewURL('../diagrams/exampleDiagrams/GitLab.drawio') }}

https://raw.githubusercontent.com/jgraph/drawio-diagrams/dev/blog/gitflow-examples.drawio

{{ createMondrianViewURL('https://raw.githubusercontent.com/jgraph/drawio-diagrams/dev/blog/gitflow-examples.drawio') }}