feat: add additional css elements to drawio figures

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).

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" }
+```

examples/docs/tests/style-diagram/test.drawio

@@ -0,0 +1,28 @@
+<mxfile host="65bd71144e">
+    <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="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;" vertex="1" parent="1">
+                    <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"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

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" }
+```

examples/docs/tests/zoom-diagram/test.drawio

@@ -0,0 +1,28 @@
+<mxfile host="65bd71144e">
+    <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="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;" vertex="1" parent="1">
+                    <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"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

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

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

mkdocs_drawio/plugin.py

@@ -12,7 +12,7 @@
 from mkdocs.config import base, config_options as c
 
 SUB_TEMPLATE = string.Template(
-    '<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="$config"></div>'
+    '<div class="mxgraph" style="max-width:100%;border:1px solid transparent;$style" data-mxgraph="$config"></div>'
 )
 
 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,25 +213,29 @@ 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:
             LOGGER.error(
                 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:

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 <jan@larwig.com>",