# MkDocs Plugin for embedding Drawio files
[](https://github.com/tuunit/mkdocs-drawio/actions)
[](https://pypi.org/project/mkdocs-drawio/)
[Buy Sergey a ☕](https://www.buymeacoffee.com/SergeyLukin)
Sergey ([onixpro](https://github.com/onixpro)) is the original creator of this plugin. Repo can be found [here.](https://github.com/onixpro/mkdocs-drawio-file)
## Features
This plugin enables you to embed interactive drawio diagrams in your documentation. Simply add your diagrams like you would any other image:
```markdown
You can either use diagrams hosted within your own docs. Absolute as well as relative paths are allowed:
Absolute path:
Same directory as the markdown file:
Relative directory to the markdown file:
Or you can use external urls:
```
Additionally this plugin supports multi page diagrams by using the `alt` text to select the pages by name:
```markdown
```
## Setup
Install plugin using pip:
```
pip install mkdocs-drawio
```
Add the plugin to your `mkdocs.yml`
```yaml
plugins:
- drawio
```
## Configuration Options
By default the plugin uses the official url for the minified drawio javascript library. To use a custom source for the drawio viewer you can overwritte the url. This might be useful in airlocked environments.
> If you want to use a self-hosted JavaScript viewer file. You should download the latest version from the [official drawio repo](https://github.com/jgraph/drawio/blob/dev/src/main/webapp/js/viewer-static.min.js).
```yaml
plugins:
- drawio:
viewer_js: "https://viewer.diagrams.net/js/viewer-static.min.js"
```
Further options are:
```yaml
plugins:
- drawio:
toolbar: true # control if hovering on a diagram shows a toolbar for zooming or not (default: true)
tooltips: true # control if tooltips will be shown (default: true)
border: 10 # increase or decrease the border / margin around your diagrams (default: 5)
```
## Material Integration
If you are using the Material Theme and want to use the [instant-loading](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=instant#instant-loading) feature. You will have to configure the following:
In your `mkdocs.yaml`:
```yaml
theme:
name: material
features:
- navigation.instant
plugins:
- drawio
extra_javascript:
- https://viewer.diagrams.net/js/viewer-static.min.js
- javascripts/drawio-reload.js
```
Add `docs/javascripts/drawio-reload.js` to your project:
```js
document$.subscribe(({ body }) => {
GraphViewer.processElements()
})
```
## How it works
1. mkdocs generates the html per page
2. `mkdocs-drawio` attaches to the `on_post_page` event. For more details, please have a look at the [event lifecycle documentation](https://www.mkdocs.org/dev-guide/plugins/#events)
3. Adds the drawio viewer library
4. Searches through the generated html for all `img` tags that have a source of type `.drawio`
5. Replaces the found `img` tags with `mxgraph` html blocks (actual drawio diagram content). For more details, please have a look at the [official drawio.com documentation](https://www.drawio.com/doc/faq/embed-html).
## Contribution guide
1. Either use the devcontainer or setup a venv with mkdocs installed
2. Install your current local version: `pip install -e .`
3. Add a test for your changes in the `example` directory
4. Test your changes by starting `mkdocs serve` in the `example` directory
5. Increase the version `pyproject.toml`
6. Open pull request
Raw data
{
"_id": null,
"home_page": "https://github.com/tuunit/mkdocs-drawio/",
"name": "mkdocs-drawio-km",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0.0,>=3.7.0",
"maintainer_email": null,
"keywords": "mkdocs, plugin, markdown, drawio, kity, minder",
"author": "Shao,ShunZhong",
"author_email": "tempestwin@163.com",
"download_url": "https://files.pythonhosted.org/packages/68/51/630f7b0db55166bda4167feed7bec445867bcf499a3ef6e3d7a2fb3fb38e/mkdocs_drawio_km-1.7.2.tar.gz",
"platform": null,
"description": "# MkDocs Plugin for embedding Drawio files\n[](https://github.com/tuunit/mkdocs-drawio/actions)\n[](https://pypi.org/project/mkdocs-drawio/)\n\n[Buy Sergey a \u2615](https://www.buymeacoffee.com/SergeyLukin) \n\nSergey ([onixpro](https://github.com/onixpro)) is the original creator of this plugin. Repo can be found [here.](https://github.com/onixpro/mkdocs-drawio-file)\n\n## Features\nThis plugin enables you to embed interactive drawio diagrams in your documentation. Simply add your diagrams like you would any other image:\n\n```markdown\nYou can either use diagrams hosted within your own docs. Absolute as well as relative paths are allowed:\n\nAbsolute path:\n\n\nSame directory as the markdown file:\n\n\nRelative directory to the markdown file:\n\n\n\nOr you can use external urls:\n\n```\n\nAdditionally this plugin supports multi page diagrams by using the `alt` text to select the pages by name:\n\n```markdown\n\n\n```\n\n## Setup\n\nInstall plugin using pip:\n\n```\npip install mkdocs-drawio\n```\n\nAdd the plugin to your `mkdocs.yml`\n\n```yaml\nplugins:\n - drawio\n```\n\n## Configuration Options\n\nBy default the plugin uses the official url for the minified drawio javascript library. To use a custom source for the drawio viewer you can overwritte the url. This might be useful in airlocked environments.\n\n> If you want to use a self-hosted JavaScript viewer file. You should download the latest version from the [official drawio repo](https://github.com/jgraph/drawio/blob/dev/src/main/webapp/js/viewer-static.min.js).\n\n```yaml\nplugins:\n - drawio:\n viewer_js: \"https://viewer.diagrams.net/js/viewer-static.min.js\"\n```\n\nFurther options are:\n\n```yaml\nplugins:\n - drawio:\n toolbar: true # control if hovering on a diagram shows a toolbar for zooming or not (default: true)\n tooltips: true # control if tooltips will be shown (default: true)\n border: 10 # increase or decrease the border / margin around your diagrams (default: 5) \n```\n\n## Material Integration\n\nIf you are using the Material Theme and want to use the [instant-loading](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=instant#instant-loading) feature. You will have to configure the following:\n\nIn your `mkdocs.yaml`:\n\n```yaml\ntheme:\n name: material\n features:\n - navigation.instant\n\nplugins:\n - drawio\n\nextra_javascript:\n - https://viewer.diagrams.net/js/viewer-static.min.js\n - javascripts/drawio-reload.js\n```\n\nAdd `docs/javascripts/drawio-reload.js` to your project:\n\n```js\ndocument$.subscribe(({ body }) => {\n GraphViewer.processElements()\n})\n```\n\n## How it works\n\n1. mkdocs generates the html per page\n2. `mkdocs-drawio` attaches to the `on_post_page` event. For more details, please have a look at the [event lifecycle documentation](https://www.mkdocs.org/dev-guide/plugins/#events)\n3. Adds the drawio viewer library\n4. Searches through the generated html for all `img` tags that have a source of type `.drawio`\n5. Replaces the found `img` tags with `mxgraph` html blocks (actual drawio diagram content). For more details, please have a look at the [official drawio.com documentation](https://www.drawio.com/doc/faq/embed-html).\n\n\n## Contribution guide\n\n1. Either use the devcontainer or setup a venv with mkdocs installed\n2. Install your current local version: `pip install -e .`\n3. Add a test for your changes in the `example` directory\n4. Test your changes by starting `mkdocs serve` in the `example` directory\n5. Increase the version `pyproject.toml`\n6. Open pull request\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "MkDocs plugin for embedding Drawio files",
"version": "1.7.2",
"project_urls": {
"Homepage": "https://github.com/tuunit/mkdocs-drawio/",
"Repository": "https://github.com/tuunit/mkdocs-drawio/"
},
"split_keywords": [
"mkdocs",
" plugin",
" markdown",
" drawio",
" kity",
" minder"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "da95ec88a2a7aa0329809bd7f42e36b5d5b5b41ed2cf55aef8695b7d99da6e5d",
"md5": "cc8ff62a4638badce2dd3202b9e5c98d",
"sha256": "ea3d5cf3a29b8369976f1d0f6a1dc2cba13657578a2fbe38f1ead2676ea8d419"
},
"downloads": -1,
"filename": "mkdocs_drawio_km-1.7.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "cc8ff62a4638badce2dd3202b9e5c98d",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0.0,>=3.7.0",
"size": 8533,
"upload_time": "2024-11-19T02:01:42",
"upload_time_iso_8601": "2024-11-19T02:01:42.395723Z",
"url": "https://files.pythonhosted.org/packages/da/95/ec88a2a7aa0329809bd7f42e36b5d5b5b41ed2cf55aef8695b7d99da6e5d/mkdocs_drawio_km-1.7.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "6851630f7b0db55166bda4167feed7bec445867bcf499a3ef6e3d7a2fb3fb38e",
"md5": "1fd2bfec1f3ecef3ecc51c160ce6dfc9",
"sha256": "98c73d05280a241979151891197444bf9ddba8d2d51831be65ce7c5bbf628314"
},
"downloads": -1,
"filename": "mkdocs_drawio_km-1.7.2.tar.gz",
"has_sig": false,
"md5_digest": "1fd2bfec1f3ecef3ecc51c160ce6dfc9",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0.0,>=3.7.0",
"size": 7801,
"upload_time": "2024-11-19T02:01:43",
"upload_time_iso_8601": "2024-11-19T02:01:43.469531Z",
"url": "https://files.pythonhosted.org/packages/68/51/630f7b0db55166bda4167feed7bec445867bcf499a3ef6e3d7a2fb3fb38e/mkdocs_drawio_km-1.7.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-19 02:01:43",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "tuunit",
"github_project": "mkdocs-drawio",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "mkdocs-drawio-km"
}
JSON
