Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add dynamic theme colors and attr_list support for paging #21

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat: add dynamic theme colors and attr_list support for paging #21

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5efade9
Add alt_as_page
yves-chevallier Jan 22, 2025
a1ef253
Adapt colorscheme and dynamic module versionning
yves-chevallier Jan 23, 2025
30db9a6
Update example/docs/tests/assets/test.drawio
yves-chevallier Jan 23, 2025
58aec35
Fix co-author email
yves-chevallier Jan 23, 2025
83c082f
Add clean script and fix drawio
yves-chevallier Jan 23, 2025
4381706
Add config options, work on documentation
yves-chevallier Jan 24, 2025
a92d841
Clean drawio files
yves-chevallier Jan 24, 2025
e7d7ed2
Update ci.yml
yves-chevallier Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,5 @@ cython_debug/
# and can be added to the global gitignore or merged into this file. For a more nuclear
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
.idea/

*.drawio.bkp
21 changes: 16 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
# MkDocs Plugin for embedding Drawio files

[![Publish Badge](https://github.com/tuunit/mkdocs-drawio/workflows/Publish/badge.svg)](https://github.com/tuunit/mkdocs-drawio/actions)
[![PyPI](https://img.shields.io/pypi/v/mkdocs-drawio)](https://pypi.org/project/mkdocs-drawio/)

[Buy Sergey a ☕](https://www.buymeacoffee.com/SergeyLukin)
[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
Expand All @@ -26,18 +28,27 @@ Or you can use external urls:
![](https://example.com/diagram.drawio)
```

Additionally this plugin supports multi page diagrams by using the `alt` text to select the pages by name:
Additionally this plugin supports multi page diagrams by using either the `page` or `alt` property. To use the `page` property, you need to use the markdown extension `attr_list`.

With `alt_as_page: True` which is the default:

```markdown
![Page-2](my-diagram.drawio)
![my-custom-page-name](my-diagram.drawio)
```

With `alt_as_page: False`:

```markdown
![Foo Diagram](my-diagram.drawio){ page="Page-2" }
![Bar Diagram](my-diagram.drawio){ page="my-custom-page-name" }
```

## Setup

Install plugin using pip:

```
```bash
pip install mkdocs-drawio
```

Expand Down Expand Up @@ -68,7 +79,8 @@ plugins:
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)
edit: true # control if edit button will be shown in the lightbox view (default: true)
border: 10 # increase or decrease the border / margin around your diagrams (default: 5)
border: 10 # increase or decrease the border / margin around your diagrams (default: 5)
alt_as_page: true # use the alt text as page name (default: false)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small thing but can you indent all comments to the same level?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

```

## Material Integration
Expand Down Expand Up @@ -107,7 +119,6 @@ document$.subscribe(({ body }) => {
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
Expand Down
60 changes: 30 additions & 30 deletions example/docs/tests/assets/test.drawio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<mxfile host="65bd71144e">
<diagram id="sWgCjdYztQFh1ezxrF-R" name="Page-1">
<mxGraphModel dx="652" dy="480" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="a" style="whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1">
<mxGeometry x="80" y="60" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="3" value="" style="endArrow=classic;startArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="2" target="4" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="160" as="sourcePoint"/>
<mxPoint x="380" y="140" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="4" value="c" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="310" y="60" width="120" height="80" as="geometry"/>
</mxCell>
<mxCell id="5" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1">
<mxGeometry x="390" y="260" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="6" value="" style="triangle;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="200" y="270" width="60" height="80" as="geometry"/>
</mxCell>
<mxCell id="7" value="Diagram from assets directory" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="180" y="195" width="180" height="30" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
<mxfile version="24.7.8">
<diagram id="sWgCjdYztQFh1ezxrF-R" name="Page-1">
<mxGraphModel dx="1420" dy="942" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" value="a" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=none;" parent="1" vertex="1">
<mxGeometry x="80" y="60" width="80" height="80" as="geometry" />
</mxCell>
<mxCell id="3" value="" style="endArrow=classic;startArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#f8cecc;strokeColor=#b85450;" parent="1" source="2" target="4" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="160" as="sourcePoint" />
<mxPoint x="380" y="140" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="4" value="c" style="ellipse;whiteSpace=wrap;html=1;fillColor=none;" parent="1" vertex="1">
<mxGeometry x="310" y="60" width="120" height="80" as="geometry" />
</mxCell>
<mxCell id="5" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
<mxGeometry x="390" y="260" width="80" height="80" as="geometry" />
</mxCell>
<mxCell id="6" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
<mxGeometry x="200" y="270" width="60" height="80" as="geometry" />
</mxCell>
<mxCell id="7" value="Diagram from assets directory" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
<mxGeometry x="180" y="195" width="180" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
19 changes: 10 additions & 9 deletions example/docs/tests/code-blocks/test.drawio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<mxfile host="65bd71144e">
<?xml version='1.0' encoding='utf-8'?>
<mxfile>
<diagram id="sWgCjdYztQFh1ezxrF-R" name="Page-1">
<mxGraphModel dx="949" dy="439" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" value="a" style="whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1">
<mxGeometry x="80" y="60" width="80" height="80" as="geometry"/>
<mxGeometry x="80" y="60" width="80" height="80" as="geometry" />
</mxCell>
<mxCell id="3" value="" style="endArrow=classic;startArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="2" target="4" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="160" as="sourcePoint"/>
<mxPoint x="380" y="140" as="targetPoint"/>
<mxPoint x="320" y="160" as="sourcePoint" />
<mxPoint x="380" y="140" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="4" value="c" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="310" y="60" width="120" height="80" as="geometry"/>
<mxGeometry x="310" y="60" width="120" height="80" as="geometry" />
</mxCell>
<mxCell id="5" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="390" y="260" width="80" height="80" as="geometry"/>
<mxGeometry x="390" y="260" width="80" height="80" as="geometry" />
</mxCell>
<mxCell id="6" value="" style="triangle;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="200" y="270" width="60" height="80" as="geometry"/>
<mxGeometry x="200" y="270" width="60" height="80" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
Expand Down
20 changes: 15 additions & 5 deletions example/docs/tests/configuration/math.drawio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36" version="24.7.7">
<?xml version='1.0' encoding='utf-8'?>
<mxfile version="24.7.8">
<diagram id="sWgCjdYztQFh1ezxrF-R" name="Page-1">
<mxGraphModel dx="963" dy="1401" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
<mxGraphModel dx="1420" dy="942" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="cVhbZjsc7NjAtHNjXZGz-10" value="&lt;span style=&quot;color: rgb(232, 62, 140); font-family: SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;&quot;&gt;LaTeX \(\sqrt{3×-1}+(1+x)^2\) and AsciiMath `a^b + b^2 = c^2`&lt;/span&gt;" style="text;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="110" y="100" width="210" height="50" as="geometry" />
<mxCell id="DrGJ5b35OeQaOMWxvQv0-1" value="LaTeX" style="swimlane;whiteSpace=wrap;html=1;fillColor=none;collapsible=0;" vertex="1" parent="1">
<mxGeometry x="90" y="200" width="250" height="110" as="geometry" />
</mxCell>
<mxCell id="DrGJ5b35OeQaOMWxvQv0-2" value="&lt;span style=&quot;font-family: SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, monospace; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;&quot;&gt;\(x_{1,2} = -b \pm \frac{\sqrt{b^2 - 4\cdot ac}}{2a}\)&lt;br&gt;&lt;/span&gt;" style="text;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=none;strokeColor=none;fontColor=default;fontSize=15;align=center;" vertex="1" parent="DrGJ5b35OeQaOMWxvQv0-1">
<mxGeometry x="10" y="40" width="230" height="60" as="geometry" />
</mxCell>
<mxCell id="DrGJ5b35OeQaOMWxvQv0-3" value="AsciiMath" style="swimlane;whiteSpace=wrap;html=1;fillColor=none;collapsible=0;" vertex="1" parent="1">
<mxGeometry x="390" y="200" width="250" height="110" as="geometry" />
</mxCell>
<mxCell id="DrGJ5b35OeQaOMWxvQv0-4" value="&lt;span style=&quot;font-family: SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, monospace; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;&quot;&gt;&lt;span style=&quot;text-align: left;&quot;&gt;`a^b + b^2 = c^2`&lt;/span&gt;&lt;br&gt;&lt;/span&gt;" style="text;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=none;strokeColor=none;fontColor=default;fontSize=15;align=center;" vertex="1" parent="DrGJ5b35OeQaOMWxvQv0-3">
<mxGeometry x="10" y="40" width="230" height="60" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
</mxfile>
52 changes: 31 additions & 21 deletions example/docs/tests/configuration/tooltips.drawio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,43 @@
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36" version="24.7.7">
<?xml version='1.0' encoding='utf-8'?>
<mxfile version="24.7.8">
<diagram id="sWgCjdYztQFh1ezxrF-R" name="Page-1">
<mxGraphModel dx="963" dy="1401" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<mxGraphModel dx="1420" dy="942" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" value="a" style="whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1">
<mxGeometry x="80" y="60" width="80" height="80" as="geometry" />
<mxCell id="ukHFlY4HRSyY0bfd62b0-7" value="Coffee Maker" style="shape=umlFrame;whiteSpace=wrap;html=1;pointerEvents=0;recursiveResize=0;container=1;collapsible=0;width=160;" vertex="1" parent="1">
<mxGeometry x="240" y="390" width="340" height="180" as="geometry" />
</mxCell>
<mxCell id="3" value="" style="endArrow=classic;startArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="2" target="4" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="160" as="sourcePoint" />
<mxPoint x="380" y="140" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="4" value="c" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="310" y="60" width="120" height="80" as="geometry" />
<mxCell id="ukHFlY4HRSyY0bfd62b0-10" value="Fill Water" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="ukHFlY4HRSyY0bfd62b0-7">
<mxGeometry x="20" y="120" width="100" height="50" as="geometry" />
</mxCell>
<mxCell id="5" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1">
<mxGeometry x="360" y="250" width="80" height="80" as="geometry" />
<mxCell id="ukHFlY4HRSyY0bfd62b0-11" value="Make Coffee" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="ukHFlY4HRSyY0bfd62b0-7">
<mxGeometry x="20" y="50" width="100" height="50" as="geometry" />
</mxCell>
<mxCell id="6" value="" style="triangle;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="110" y="250" width="60" height="80" as="geometry" />
</mxCell>
<UserObject label="Hover over me." tooltip="Hello I&#39;m a tooltip." id="cVhbZjsc7NjAtHNjXZGz-8">
<mxCell style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="210" y="190" width="110" height="30" as="geometry" />
<UserObject label="Hover over me." tooltip="Hello I'm a tooltip." id="cVhbZjsc7NjAtHNjXZGz-8">
<mxCell style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="ukHFlY4HRSyY0bfd62b0-7" vertex="1">
<mxGeometry x="174" y="90" width="110" height="30" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="ukHFlY4HRSyY0bfd62b0-8" value="Drinker" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;" vertex="1" parent="1">
<mxGeometry x="150" y="400" width="30" height="60" as="geometry" />
</mxCell>
<mxCell id="ukHFlY4HRSyY0bfd62b0-9" value="Technician" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;" vertex="1" parent="1">
<mxGeometry x="150" y="500" width="30" height="60" as="geometry" />
</mxCell>
<mxCell id="ukHFlY4HRSyY0bfd62b0-12" value="" style="endArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="ukHFlY4HRSyY0bfd62b0-8" target="ukHFlY4HRSyY0bfd62b0-11">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="390" y="510" as="sourcePoint" />
<mxPoint x="440" y="460" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="ukHFlY4HRSyY0bfd62b0-13" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="ukHFlY4HRSyY0bfd62b0-9" target="ukHFlY4HRSyY0bfd62b0-10">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="190" y="446" as="sourcePoint" />
<mxPoint x="270" y="475" as="targetPoint" />
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
</mxfile>
Loading