From e15b53d83d16d3e47c6801074ee03e2ac8f6787b Mon Sep 17 00:00:00 2001 From: Anton Gres Date: Sun, 8 Mar 2026 22:36:30 +0100 Subject: [PATCH 1/2] feat: Add option to add custom style to mxgraph * Add style string to mxgraph via keyword "style" Signed-off-by: Anton Gres --- examples/docs/tests/style-diagram/index.md | 19 ++++++++++++ examples/docs/tests/style-diagram/test.drawio | 28 +++++++++++++++++ examples/mkdocs-classic.yml | 1 + examples/mkdocs.yml | 1 + mkdocs_drawio/plugin.py | 30 ++++++++++++++----- pyproject.toml | 2 +- 6 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 examples/docs/tests/style-diagram/index.md create mode 100644 examples/docs/tests/style-diagram/test.drawio diff --git a/examples/docs/tests/style-diagram/index.md b/examples/docs/tests/style-diagram/index.md new file mode 100644 index 0000000..40c0249 --- /dev/null +++ b/examples/docs/tests/style-diagram/index.md @@ -0,0 +1,19 @@ +# Style diagrams + +## Examples + +- Set background colour to green + `style="background-color: green;"` + +![](test.drawio){ style="background-color: green;"} + +- Center diagram + `style="margin: auto;"` + +![](test.drawio){ style="margin: auto;"} + +## Markdown + +```markdown +![](test.drawio){ style="$STYLE_STRING" } +``` diff --git a/examples/docs/tests/style-diagram/test.drawio b/examples/docs/tests/style-diagram/test.drawio new file mode 100644 index 0000000..6af922c --- /dev/null +++ b/examples/docs/tests/style-diagram/test.drawio @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/mkdocs-classic.yml b/examples/mkdocs-classic.yml index 57488ff..4f23411 100644 --- a/examples/mkdocs-classic.yml +++ b/examples/mkdocs-classic.yml @@ -8,6 +8,7 @@ nav: - Plumbing: plumbing.md - Examples: - Simple Diagram: "tests/simple-diagram/index.md" + - Diagram with styles: "tests/style-diagram/index.md" - Error Handling: "tests/error-handling/index.md" - Configuration: "tests/configuration/index.md" - Code Blocks: "tests/code-blocks/index.md" diff --git a/examples/mkdocs.yml b/examples/mkdocs.yml index 95673bd..b84454a 100644 --- a/examples/mkdocs.yml +++ b/examples/mkdocs.yml @@ -8,6 +8,7 @@ nav: - Plumbing: plumbing.md - Examples: - Simple Diagram: "tests/simple-diagram/index.md" + - Diagram with styles: "tests/style-diagram/index.md" - Error Handling: "tests/error-handling/index.md" - Configuration: "tests/configuration/index.md" - Code Blocks: "tests/code-blocks/index.md" diff --git a/mkdocs_drawio/plugin.py b/mkdocs_drawio/plugin.py index 117620f..f9ecd81 100644 --- a/mkdocs_drawio/plugin.py +++ b/mkdocs_drawio/plugin.py @@ -12,7 +12,7 @@ from mkdocs.config import base, config_options as c SUB_TEMPLATE = string.Template( - '
' + '
' ) LOGGER = logging.getLogger("mkdocs.plugins.diagrams") @@ -174,9 +174,15 @@ def render_drawio_diagrams(self, output_content, page): if self.toolbar_config.show_title: diagram_config["title"] = diagram["src"].split("/")[-1] + diagram_style = "" + if diagram.has_attr("style"): + diagram_style = diagram.get("style") + if re.search("^https?://", diagram["src"]): mxgraph = BeautifulSoup( - DrawioPlugin.substitute_with_url(diagram_config, diagram["src"]), + DrawioPlugin.substitute_with_url( + diagram_config, diagram["src"], diagram_style + ), "html.parser", ) else: @@ -190,7 +196,11 @@ def render_drawio_diagrams(self, output_content, page): mxgraph = BeautifulSoup( DrawioPlugin.substitute_with_file( - diagram_config, path, diagram["src"], diagram_page + diagram_config, + path, + diagram["src"], + diagram_page, + diagram_style, ), "html.parser", ) @@ -200,13 +210,15 @@ def render_drawio_diagrams(self, output_content, page): return str(soup) @staticmethod - def substitute_with_url(config: Dict, url: str) -> str: + def substitute_with_url(config: Dict, url: str, style: str) -> str: config["url"] = url - return SUB_TEMPLATE.substitute(config=escape(json.dumps(config))) + return SUB_TEMPLATE.substitute(config=escape(json.dumps(config)), style=style) @staticmethod - def substitute_with_file(config: Dict, path: Path, src: str, page: str) -> str: + def substitute_with_file( + config: Dict, path: Path, src: str, page: str, style: str + ) -> str: try: diagram_xml = etree.parse(path.joinpath(src).resolve()) except Exception as e: @@ -214,11 +226,13 @@ def substitute_with_file(config: Dict, path: Path, src: str, page: str) -> str: f"Error: Could not parse diagram file '{src}' on path '{path}': {e}" ) config["xml"] = "" - return SUB_TEMPLATE.substitute(config=escape(json.dumps(config))) + return SUB_TEMPLATE.substitute( + config=escape(json.dumps(config)), style=style + ) diagram = DrawioPlugin.parse_diagram(diagram_xml, page) config["xml"] = diagram - return SUB_TEMPLATE.substitute(config=escape(json.dumps(config))) + return SUB_TEMPLATE.substitute(config=escape(json.dumps(config)), style=style) @staticmethod def parse_diagram(data, page_name, src="", path=None) -> str: diff --git a/pyproject.toml b/pyproject.toml index 3f0712a..4e6d667 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [tool.poetry] name = "mkdocs-drawio" -version = "1.14.0" +version = "1.15.0" description = "MkDocs plugin for embedding Drawio files" authors = [ "Jan Larwig ", From 09caa9cc262db0b3a103617a949bb35c2dfafbde Mon Sep 17 00:00:00 2001 From: Anton Gres Date: Sun, 8 Mar 2026 22:36:51 +0100 Subject: [PATCH 2/2] feat: Add option to add zoom level * Add zoom string to data-mxgraph via keyword "zoom" Signed-off-by: Anton Gres Signed-off-by: Jan Larwig --- README.md | 2 ++ examples/docs/tests/style-diagram/index.md | 9 +++++++ examples/docs/tests/zoom-diagram/index.md | 11 ++++++++ examples/docs/tests/zoom-diagram/test.drawio | 28 ++++++++++++++++++++ examples/mkdocs-classic.yml | 2 ++ examples/mkdocs.yml | 2 ++ mkdocs_drawio/plugin.py | 5 +++- 7 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 examples/docs/tests/zoom-diagram/index.md create mode 100644 examples/docs/tests/zoom-diagram/test.drawio diff --git a/README.md b/README.md index 9a95fa1..5a9cc29 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,8 @@ plugins: ## Configuration Options +Full documentation of the configuration options and examples can be found in the [official documentation](https://tuunit.github.io/mkdocs-drawio/) + 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). diff --git a/examples/docs/tests/style-diagram/index.md b/examples/docs/tests/style-diagram/index.md index 40c0249..6bad9fd 100644 --- a/examples/docs/tests/style-diagram/index.md +++ b/examples/docs/tests/style-diagram/index.md @@ -12,6 +12,15 @@ ![](test.drawio){ style="margin: auto;"} +!!! note annotate + + Styles, which change the size of the diagram like `style="zoom: 0.5"`, are + not recommended to use with the style option because the minified drawio + javascript library creates and destroys the toolbar outside the mxgraph + diagram container. Meaning the toolbar does not get styled too. + + Use the [zoom option](../zoom-diagram/index.md) instead. + ## Markdown ```markdown diff --git a/examples/docs/tests/zoom-diagram/index.md b/examples/docs/tests/zoom-diagram/index.md new file mode 100644 index 0000000..6406ff5 --- /dev/null +++ b/examples/docs/tests/zoom-diagram/index.md @@ -0,0 +1,11 @@ +# Resized diagram + +## Example + +![](test.drawio){ zoom="0.5" } + +## Markdown + +```markdown +![](test.drawio){ zoom="0.5" } +``` diff --git a/examples/docs/tests/zoom-diagram/test.drawio b/examples/docs/tests/zoom-diagram/test.drawio new file mode 100644 index 0000000..6af922c --- /dev/null +++ b/examples/docs/tests/zoom-diagram/test.drawio @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/mkdocs-classic.yml b/examples/mkdocs-classic.yml index 4f23411..df50e16 100644 --- a/examples/mkdocs-classic.yml +++ b/examples/mkdocs-classic.yml @@ -9,6 +9,7 @@ nav: - Examples: - Simple Diagram: "tests/simple-diagram/index.md" - Diagram with styles: "tests/style-diagram/index.md" + - Resized diagram: "tests/zoom-diagram/index.md" - Error Handling: "tests/error-handling/index.md" - Configuration: "tests/configuration/index.md" - Code Blocks: "tests/code-blocks/index.md" @@ -40,6 +41,7 @@ plugins: markdown_extensions: - attr_list + - admonition - pymdownx.superfences repo_url: https://github.com/tuunit/mkdocs-drawio diff --git a/examples/mkdocs.yml b/examples/mkdocs.yml index b84454a..af04687 100644 --- a/examples/mkdocs.yml +++ b/examples/mkdocs.yml @@ -9,6 +9,7 @@ nav: - Examples: - Simple Diagram: "tests/simple-diagram/index.md" - Diagram with styles: "tests/style-diagram/index.md" + - Resized diagram: "tests/zoom-diagram/index.md" - Error Handling: "tests/error-handling/index.md" - Configuration: "tests/configuration/index.md" - Code Blocks: "tests/code-blocks/index.md" @@ -39,6 +40,7 @@ extra_javascript: markdown_extensions: - attr_list + - admonition - pymdownx.superfences - pymdownx.tabbed: alternate_style: true diff --git a/mkdocs_drawio/plugin.py b/mkdocs_drawio/plugin.py index f9ecd81..4008949 100644 --- a/mkdocs_drawio/plugin.py +++ b/mkdocs_drawio/plugin.py @@ -176,7 +176,10 @@ def render_drawio_diagrams(self, output_content, page): diagram_style = "" if diagram.has_attr("style"): - diagram_style = diagram.get("style") + diagram_style = diagram.get("style") + + if diagram.has_attr("zoom"): + diagram_config["zoom"] = diagram.get("zoom") if re.search("^https?://", diagram["src"]): mxgraph = BeautifulSoup(