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 new file mode 100644 index 0000000..6bad9fd --- /dev/null +++ b/examples/docs/tests/style-diagram/index.md @@ -0,0 +1,28 @@ +# 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;"} + +!!! 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 +![](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/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 57488ff..df50e16 100644 --- a/examples/mkdocs-classic.yml +++ b/examples/mkdocs-classic.yml @@ -8,6 +8,8 @@ nav: - Plumbing: plumbing.md - 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 +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 95673bd..af04687 100644 --- a/examples/mkdocs.yml +++ b/examples/mkdocs.yml @@ -8,6 +8,8 @@ nav: - Plumbing: plumbing.md - 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" @@ -38,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 117620f..4008949 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,18 @@ 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 diagram.has_attr("zoom"): + diagram_config["zoom"] = diagram.get("zoom") + 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 +199,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 +213,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 +229,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 ",