Mermaid does not work after decryption in mkdocs-material (workaround)

[deponovo]

The title describes the observation in full.

Here a minimal example:
mkdocs.yml

site_name: "mermaid test"
theme:
  material
plugins:
  - search
  - encryptcontent:
      # webcrypto: true # use browsers webcrypto support
      mermaid2: true
      global_password: 'test'
nav:
  - test: index.md

docs/index.md

```mermaid
graph LR
  A[write/modify code] --> B[compile];
  B --> C[debug];
  C --> A;
\``` 

Unfortunately, I can only report the issue.

[unverbuggt]

Hi,

Material implements mermaid2 differently, see here.

The way I tested the decryption was to include mermaid2 as plugin like this:

plugins:
    - mermaid2:
        version: 9.4.3

But I'll dig into that. Maybe there is a way to trigger mermaid generation after decryption the mkdocs-material way...

But it doesn't matter whether webcrypto was enabled or not.

[unverbuggt]

Maybe there is a way to simply re-call the functions material uses to call mermaid.js, but I haven't found any. Until we find one this is the only solution I could come up with...

If you take the current development version of mkdocs-encryptcontent-plugin and change its configuration like this:

site_name: "mermaid test"
theme:
  name: material
  palette: 
  # Palette toggle for light mode
  - scheme: default
    primary: light green
    accent: orange
    toggle:
      icon: material/brightness-7 
      name: Switch to dark mode
  # Palette toggle for dark mode
  - scheme: slate
    primary: light green
    accent: orange
    toggle:
      icon: material/brightness-4
      name: Switch to light mode

plugins:
  - search: {}
  - encryptcontent:
      webcrypto: true # use browsers webcrypto support
      global_password: 'test'
      reload_scripts:
        - '#autostart' #call the script to render with mermaid.js

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

and then add inline html to your markdown page like this:

# marmaid graph

```mermaid
graph LR
  A[write/modify code] --> B[compile];
  B --> C[debug];
  C --> A;
```

Some text...

<script type="module" id="autostart">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

//this is straight from the compiled typescript bundle of mkdocs-material
var Ln=".node circle,.node ellipse,.node path,.node polygon,.node rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}marker{fill:var(--md-mermaid-edge-color)!important}.edgeLabel .label rect{fill:#0000}.label{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.label foreignObject{line-height:normal;overflow:visible}.label div .edgeLabel{color:var(--md-mermaid-label-fg-color)}.edgeLabel,.edgeLabel rect,.label div .edgeLabel{background-color:var(--md-mermaid-label-bg-color)}.edgeLabel,.edgeLabel rect{fill:var(--md-mermaid-label-bg-color);color:var(--md-mermaid-edge-color)}.edgePath .path,.flowchart-link{stroke:var(--md-mermaid-edge-color);stroke-width:.05rem}.edgePath .arrowheadPath{fill:var(--md-mermaid-edge-color);stroke:none}.cluster rect{fill:var(--md-default-fg-color--lightest);stroke:var(--md-default-fg-color--lighter)}.cluster span{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}g #flowchart-circleEnd,g #flowchart-circleStart,g #flowchart-crossEnd,g #flowchart-crossStart,g #flowchart-pointEnd,g #flowchart-pointStart{stroke:none}g.classGroup line,g.classGroup rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}g.classGroup text{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.classLabel .box{fill:var(--md-mermaid-label-bg-color);background-color:var(--md-mermaid-label-bg-color);opacity:1}.classLabel .label{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.node .divider{stroke:var(--md-mermaid-node-fg-color)}.relation{stroke:var(--md-mermaid-edge-color)}.cardinality{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.cardinality text{fill:inherit!important}defs #classDiagram-compositionEnd,defs #classDiagram-compositionStart,defs #classDiagram-dependencyEnd,defs #classDiagram-dependencyStart,defs #classDiagram-extensionEnd,defs #classDiagram-extensionStart{fill:var(--md-mermaid-edge-color)!important;stroke:var(--md-mermaid-edge-color)!important}defs #classDiagram-aggregationEnd,defs #classDiagram-aggregationStart{fill:var(--md-mermaid-label-bg-color)!important;stroke:var(--md-mermaid-edge-color)!important}g.stateGroup rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}g.stateGroup .state-title{fill:var(--md-mermaid-label-fg-color)!important;font-family:var(--md-mermaid-font-family)}g.stateGroup .composit{fill:var(--md-mermaid-label-bg-color)}.nodeLabel{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.node circle.state-end,.node circle.state-start,.start-state{fill:var(--md-mermaid-edge-color);stroke:none}.end-state-inner,.end-state-outer{fill:var(--md-mermaid-edge-color)}.end-state-inner,.node circle.state-end{stroke:var(--md-mermaid-label-bg-color)}.transition{stroke:var(--md-mermaid-edge-color)}[id^=state-fork] rect,[id^=state-join] rect{fill:var(--md-mermaid-edge-color)!important;stroke:none!important}.statediagram-cluster.statediagram-cluster .inner{fill:var(--md-default-bg-color)}.statediagram-cluster rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}.statediagram-state rect.divider{fill:var(--md-default-fg-color--lightest);stroke:var(--md-default-fg-color--lighter)}defs #statediagram-barbEnd{stroke:var(--md-mermaid-edge-color)}.attributeBoxEven,.attributeBoxOdd{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}.entityBox{fill:var(--md-mermaid-label-bg-color);stroke:var(--md-mermaid-node-fg-color)}.entityLabel{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.relationshipLabelBox{fill:var(--md-mermaid-label-bg-color);fill-opacity:1;background-color:var(--md-mermaid-label-bg-color);opacity:1}.relationshipLabel{fill:var(--md-mermaid-label-fg-color)}.relationshipLine{stroke:var(--md-mermaid-edge-color)}defs #ONE_OR_MORE_END *,defs #ONE_OR_MORE_START *,defs #ONLY_ONE_END *,defs #ONLY_ONE_START *,defs #ZERO_OR_MORE_END *,defs #ZERO_OR_MORE_START *,defs #ZERO_OR_ONE_END *,defs #ZERO_OR_ONE_START *{stroke:var(--md-mermaid-edge-color)!important}defs #ZERO_OR_MORE_END circle,defs #ZERO_OR_MORE_START circle{fill:var(--md-mermaid-label-bg-color)}.actor{fill:var(--md-mermaid-sequence-actor-bg-color);stroke:var(--md-mermaid-sequence-actor-border-color)}text.actor>tspan{fill:var(--md-mermaid-sequence-actor-fg-color);font-family:var(--md-mermaid-font-family)}line{stroke:var(--md-mermaid-sequence-actor-line-color)}.actor-man circle,.actor-man line{fill:var(--md-mermaid-sequence-actorman-bg-color);stroke:var(--md-mermaid-sequence-actorman-line-color)}.messageLine0,.messageLine1{stroke:var(--md-mermaid-sequence-message-line-color)}.note{fill:var(--md-mermaid-sequence-note-bg-color);stroke:var(--md-mermaid-sequence-note-border-color)}.loopText,.loopText>tspan,.messageText,.noteText>tspan{stroke:none;font-family:var(--md-mermaid-font-family)!important}.messageText{fill:var(--md-mermaid-sequence-message-fg-color)}.loopText,.loopText>tspan{fill:var(--md-mermaid-sequence-loop-fg-color)}.noteText>tspan{fill:var(--md-mermaid-sequence-note-fg-color)}#arrowhead path{fill:var(--md-mermaid-sequence-message-line-color);stroke:none}.loopLine{fill:var(--md-mermaid-sequence-loop-bg-color);stroke:var(--md-mermaid-sequence-loop-border-color)}.labelBox{fill:var(--md-mermaid-sequence-label-bg-color);stroke:none}.labelText,.labelText>span{fill:var(--md-mermaid-sequence-label-fg-color);font-family:var(--md-mermaid-font-family)}.sequenceNumber{fill:var(--md-mermaid-sequence-number-fg-color)}rect.rect{fill:var(--md-mermaid-sequence-box-bg-color);stroke:none}rect.rect+text.text{fill:var(--md-mermaid-sequence-box-fg-color)}defs #sequencenumber{fill:var(--md-mermaid-sequence-number-bg-color)!important}";

mermaid.initialize({ startOnLoad: false,themeCSS:Ln,sequence:{actorFontSize:"16px",messageFontSize:"16px",noteFontSize:"16px"}});

const drawDiagrams = async function () {
  const graphs = document.querySelectorAll("pre.mermaid");
  let id;
  for (let i = 0; i < graphs.length; i++) {
    id = '__mermaid_'+i
    graphs[i].classList.remove("mermaid")
    let graph = document.createElement('div');
    graph.classList.add("mermaid");
    const { svg } = await mermaid.render(id, graphs[i].childNodes[0].innerText);
    const shadow = graph.attachShadow({ mode: "closed" })
    shadow.innerHTML = svg
    graphs[i].replaceWith(graph)
  }
};

drawDiagrams();
</script>

Then it'll render mermaid graphs just the way material would (with color theme and light/dark mode).

[unverbuggt]

I'll figure something out. Maybe we need to run different fixes for various themes after decryption

[deponovo]

Thanks for your support. If this would have been in my range of knowledge I would happily help... but java... humhmm... typescript is not.

[unverbuggt]

You'll need to clone the current development version of this plugin and install from source until I push the next release.

Please test if the current fix works for you.

[deponovo]

I could not get it working. I am using a docker image based on the following:

FROM python:3.12-slim

RUN apt update && apt upgrade -y && apt install git -y && apt install zip -y
RUN python -m pip install --upgrade pip
RUN pip install mkdocs-encryptcontent-plugin==3.0.0
RUN git clone https://github.com/unverbuggt/mkdocs-encryptcontent-plugin 
    && cd mkdocs-encryptcontent-plugin 
    && python setup.py sdist bdist_wheel 
    && pip install --force-reinstall --no-deps dist/mkdocs_encryptcontent_plugin-3.0.1-py3-none-any.whl
RUN git clone --depth 1 --branch 9.5.2 https://github.com/squidfunk/mkdocs-material
COPY material_browser_request9_4p.patch mkdocs-material/.
WORKDIR "mkdocs-material"
RUN apt install nodejs -y && echo node -v
RUN apt install npm -y
RUN pip install -e ".[recommended]"
RUN pip install mkdocs-minify-plugin
RUN pip install mkdocs-redirects
RUN npm install
RUN patch -p 0 < material_browser_request9_4p.patch
RUN npm run build
RUN pip install --force-reinstall .

The installation of the latest version of your plugin seems right. Here a piece from the progress:

#9 3.917 Processing ./dist/mkdocs_encryptcontent_plugin-3.0.1-py3-none-any.whl
#9 3.926 Installing collected packages: mkdocs-encryptcontent-plugin
#9 3.927   Attempting uninstall: mkdocs-encryptcontent-plugin
#9 3.938     Found existing installation: mkdocs-encryptcontent-plugin 3.0.0
#9 3.972     Uninstalling mkdocs-encryptcontent-plugin-3.0.0:
#9 3.986       Successfully uninstalled mkdocs-encryptcontent-plugin-3.0.0
#9 4.032 Successfully installed mkdocs-encryptcontent-plugin-3.0.1

After build the website with these key settings:

  - encryptcontent:
      placeholder: 'Password'
      password_button_text: 'Unlock'
      decryption_failure_message: 'Wrong password.'
      encryption_info_message: ''
      password_button: true
      webcrypto: true
      tag_encrypted_page: false
      remember_password: true
      search_index: 'dynamically'
      mermaid2: true
      reload_scripts:
        - '#autostart'
      global_password: 'test'

It still does not render the mermaid code into svgs.

[unverbuggt]

Hi,

if you updated today, then you'd have the latest version (no installation from git needed). how does the rest of your mkdocs.yml read? you need to add the following:

extra_javascript:
  - assets/javascripts/material-encryptcontent.mjs

and also copy the "material-encryptcontent.mjs" file to docs/assets/javascripts/.

Markdown extensions need to be enabled also:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

[deponovo]

I confirm that it is now working. Thank you for your support.