From a5be2dadb9cdc74f0d359bf80ffcaa4c92a35e83 Mon Sep 17 00:00:00 2001 From: Yves Chevallier Date: Wed, 3 Jul 2024 20:51:38 +0200 Subject: [PATCH 1/9] Add link_css option --- mkdocs_drawio_exporter/exporter.py | 33 +++++++++++++++++++++++++++++- mkdocs_drawio_exporter/plugin.py | 1 + 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/mkdocs_drawio_exporter/exporter.py b/mkdocs_drawio_exporter/exporter.py index cf8d2b0..956706d 100644 --- a/mkdocs_drawio_exporter/exporter.py +++ b/mkdocs_drawio_exporter/exporter.py @@ -248,6 +248,34 @@ def validate_config(self, config: Configuration): 'embed_format', config['embed_format'], 'cannot inline content of non-SVG format') + def set_css_classes(self, svg_content, prefix="--drawio-color"): + """Rewrite SVG styles to use CSS variables. + Will replace all `stroke` and `fill` attributes with CSS variables + such as `var(--drawio-color-ffffff)`. + + :param str svg_content: SVG content. + :param str prefix: CSS variable prefix. + + :return str: SVG content with styles rewritten. + """ + pattern = re.compile( + (r'(fill|stroke)\s*=' + r'\s*\"(\#[A-Fa-f0-9]+|' + r'rgb\([0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\))\"')) + + def apply_style(match): + fill = match.group(2) + if fill.startswith("#"): + hexcolor = fill[1:] + else: + r, g, b = [ + int(x) for x in + re.match(r"rgb\((\d+),\s*(\d+),\s*(\d+)\)", fill).groups()] + hexcolor = f"{r:02x}{g:02x}{b:02x}" + return f'{match.group(1)}="{f"var({prefix}-{hexcolor})"}"' + + return pattern.sub(apply_style, svg_content) + def rewrite_image_embeds(self, page_dest_path, output_content, config: Configuration): """Rewrite image embeds. @@ -289,9 +317,12 @@ def replace(match): self.log.error(f'Export failed with exit status {exit_status}; skipping rewrite') return match.group(0) - with open(img_path, "r") as f: + with open(img_path, "r", encoding="utf-8") as f: content = f.read() + if config["link_css"]: + content = self.set_css_classes(content) + return config["embed_format"].format( img_open=match.group(1), img_close=match.group(3), img_src=img_src, content=content) diff --git a/mkdocs_drawio_exporter/plugin.py b/mkdocs_drawio_exporter/plugin.py index e507c04..35ab2a4 100644 --- a/mkdocs_drawio_exporter/plugin.py +++ b/mkdocs_drawio_exporter/plugin.py @@ -27,6 +27,7 @@ class DrawIoExporterPlugin(mkdocs.plugins.BasePlugin): ('format', config_options.Type(str, default='svg')), ('embed_format', config_options.Type(str, default='{img_open}{img_src}{img_close}')), ('sources', config_options.Type(str, default='*.drawio')), + ('link_css', config_options.Type(bool, default=False)), ) exporter = None From cc3bc330ece89ab7ec0b1596b472a85a0cc9b929 Mon Sep 17 00:00:00 2001 From: Yves Chevallier Date: Wed, 3 Jul 2024 21:18:32 +0200 Subject: [PATCH 2/9] Allow attr_list link_css=1 --- mkdocs_drawio_exporter/exporter.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mkdocs_drawio_exporter/exporter.py b/mkdocs_drawio_exporter/exporter.py index 956706d..5266416 100644 --- a/mkdocs_drawio_exporter/exporter.py +++ b/mkdocs_drawio_exporter/exporter.py @@ -320,7 +320,7 @@ def replace(match): with open(img_path, "r", encoding="utf-8") as f: content = f.read() - if config["link_css"]: + if config["link_css"] or re.findall(r'link_css="(?:true|yes|1)"', match.group(0)): content = self.set_css_classes(content) return config["embed_format"].format( From ab02f0234b7d356a30a43cc63d68ad26c82e8dce Mon Sep 17 00:00:00 2001 From: Yves Chevallier Date: Wed, 3 Jul 2024 21:28:23 +0200 Subject: [PATCH 3/9] Add documentation to readme --- README.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/README.md b/README.md index bc30f1e..127bd08 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ plugins: embed_format: '{img_open}{img_src}{img_close}' # Glob pattern for matching source files sources: '*.drawio' + # Link draw.io colours with theme CSS + link_css: false ``` ## Usage @@ -77,6 +79,36 @@ If you're working with multi-page documents, append the index of the page as an The plugin will export the diagram to the `format` specified in your configuration and will rewrite the `` tag in the generated page to match. To speed up your documentation rebuilds, the generated output will be placed into `cache_dir` and then copied to the desired destination. The cached images will only be updated if the source diagram's modification date is newer than the cached export. Thus, bear in mind caching works per file - with large multi-page documents a change to one page will rebuild all pages, which will be slower than separate files per page. +### Linking draw.io colours with theme CSS + +If you want to link the colours in your draw.io diagrams with your MkDocs theme CSS, set `link_css` to `true` in your configuration. This will replace the colours in your diagrams with the colours defined in your extra CSS. This is useful if you want to ensure your diagrams match the look and feel of your documentation, especially when toggling between light and dark themes. + +You should define the colours in your custom CSS using the following classes: + +```css +:root { + /* First 8 colors in draw.io Style panel */ + --drawio-color-ffffff: #000000; + --drawio-color-f5f5f5: #e9b3b3; + --drawio-color-dae8fc: #9bbbe7; + --drawio-color-d5e8d4: #75c770; + --drawio-color-ffe6cc: #cc9e6d; + --drawio-color-fff2cc: #dabd66; + --drawio-color-f8cecc: #b95c57; + --drawio-color-e1d5e7: #8c49ad; +} + +[data-md-color-scheme="slate"] { + /* Same for dark theme */ +} +``` + +To activate the custom CSS for some drawings only, you can use the `attr_list` option in your document: + +```md +![My alt text](my-diagram.drawio){ link_css=true|yes|1 } +``` + ### GitHub Actions See [this guide](./docs/github-actions.md). From a0e9d047106868109d950146fc30e31e8792ffe0 Mon Sep 17 00:00:00 2001 From: Yves Chevallier <52489316+yves-chevallier@users.noreply.github.com> Date: Mon, 15 Jul 2024 07:58:20 +0200 Subject: [PATCH 4/9] Brit painful u Co-authored-by: Luke Carrier --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 127bd08..29d31d9 100644 --- a/README.md +++ b/README.md @@ -59,8 +59,9 @@ plugins: embed_format: '{img_open}{img_src}{img_close}' # Glob pattern for matching source files sources: '*.drawio' - # Link draw.io colours with theme CSS - link_css: false + # Replace diagrams' default colors with the theme's + # NOTE: requires support from theme or custom CSS + use_theme_colors: false ``` ## Usage From 58f5058eb3e3ca2374d99be02eda2aab83a843bf Mon Sep 17 00:00:00 2001 From: Yves Chevallier <52489316+yves-chevallier@users.noreply.github.com> Date: Mon, 15 Jul 2024 08:00:04 +0200 Subject: [PATCH 5/9] Rename option, and fix readme Co-authored-by: Luke Carrier --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 29d31d9..61eb9f3 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ The plugin will export the diagram to the `format` specified in your configurati ### Linking draw.io colours with theme CSS -If you want to link the colours in your draw.io diagrams with your MkDocs theme CSS, set `link_css` to `true` in your configuration. This will replace the colours in your diagrams with the colours defined in your extra CSS. This is useful if you want to ensure your diagrams match the look and feel of your documentation, especially when toggling between light and dark themes. +If you want to source colors in your diagrams from your MkDocs theme or custom CSS, set `use_theme_colors` to `true` in your configuration. This will replace the colors in your diagrams with the colours defined in your theme or `extra_css`. This is useful if you want to ensure your diagrams match the look and feel of your documentation, especially when toggling between light and dark themes. You should define the colours in your custom CSS using the following classes: From 24028b047c439ad3b4558322449e6746e9401622 Mon Sep 17 00:00:00 2001 From: Yves Chevallier <52489316+yves-chevallier@users.noreply.github.com> Date: Mon, 15 Jul 2024 08:02:02 +0200 Subject: [PATCH 6/9] Update README.md Co-authored-by: Luke Carrier --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 61eb9f3..799506a 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ The plugin will export the diagram to the `format` specified in your configurati If you want to source colors in your diagrams from your MkDocs theme or custom CSS, set `use_theme_colors` to `true` in your configuration. This will replace the colors in your diagrams with the colours defined in your theme or `extra_css`. This is useful if you want to ensure your diagrams match the look and feel of your documentation, especially when toggling between light and dark themes. -You should define the colours in your custom CSS using the following classes: +You should define the colors in your custom CSS with CSS variables, as follows: ```css :root { From c8007109edc5a5ba3223901c0db6023f475168f4 Mon Sep 17 00:00:00 2001 From: Yves Chevallier <52489316+yves-chevallier@users.noreply.github.com> Date: Mon, 15 Jul 2024 08:03:03 +0200 Subject: [PATCH 7/9] Change option name Co-authored-by: Luke Carrier --- mkdocs_drawio_exporter/exporter.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mkdocs_drawio_exporter/exporter.py b/mkdocs_drawio_exporter/exporter.py index 5266416..91a50a5 100644 --- a/mkdocs_drawio_exporter/exporter.py +++ b/mkdocs_drawio_exporter/exporter.py @@ -320,7 +320,7 @@ def replace(match): with open(img_path, "r", encoding="utf-8") as f: content = f.read() - if config["link_css"] or re.findall(r'link_css="(?:true|yes|1)"', match.group(0)): + if config["use_theme_colors"] or not re.findall(r'use_theme_colors="(?:false|no|0)"', match.group(0)): content = self.set_css_classes(content) return config["embed_format"].format( From c0ab08f98c81aa40f3ca2776c12c4ba996d4d84d Mon Sep 17 00:00:00 2001 From: Yves Chevallier <52489316+yves-chevallier@users.noreply.github.com> Date: Mon, 15 Jul 2024 08:03:21 +0200 Subject: [PATCH 8/9] Change option name Co-authored-by: Luke Carrier --- mkdocs_drawio_exporter/plugin.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mkdocs_drawio_exporter/plugin.py b/mkdocs_drawio_exporter/plugin.py index 35ab2a4..5cd040d 100644 --- a/mkdocs_drawio_exporter/plugin.py +++ b/mkdocs_drawio_exporter/plugin.py @@ -27,7 +27,7 @@ class DrawIoExporterPlugin(mkdocs.plugins.BasePlugin): ('format', config_options.Type(str, default='svg')), ('embed_format', config_options.Type(str, default='{img_open}{img_src}{img_close}')), ('sources', config_options.Type(str, default='*.drawio')), - ('link_css', config_options.Type(bool, default=False)), + ('use_theme_colors', config_options.Type(bool, default=False)), ) exporter = None From 5a50bb8271da79211e22d0adbcf82e914759b099 Mon Sep 17 00:00:00 2001 From: Yves Chevallier <52489316+yves-chevallier@users.noreply.github.com> Date: Mon, 15 Jul 2024 08:06:30 +0200 Subject: [PATCH 9/9] Update README.md Co-authored-by: Luke Carrier --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 799506a..a48597e 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,7 @@ You should define the colors in your custom CSS with CSS variables, as follows: To activate the custom CSS for some drawings only, you can use the `attr_list` option in your document: ```md -![My alt text](my-diagram.drawio){ link_css=true|yes|1 } +![My alt text](my-diagram.drawio){ use_theme_colors=true } ``` ### GitHub Actions