mkdocs-mermaid2-plugin: Syntax Error Due to Incorrect Generated HTML File

Not sure if this issue is being faced by me or others as well. Mermaid diagrams won’t render for me no matter what - I checked my formatting, syntax, etc, but kept getting the Syntax Error image.

After checking the generated HTML files, I saw the HTML code was generated as follows.

<pre><code class="mermaid">graph TD
  A[Client] --&gt; B[Load Balancer]
  B --&gt; C[Server01]
  B --&gt; D[Server02]
</code></pre>

As you can see, it shows up as <code> ... </code>. I manually changed it to <div>...</div> and the diagrams generated just fine.

<pre><div class="mermaid">graph TD
  A[Client] --&gt; B[Load Balancer]
  B --&gt; C[Server01]
  B --&gt; D[Server02]
</div></pre>

Running mkdocs build reverts it back to code and so syntax errors start occurring again.

Attaching my yml file for reference:

site_name: My Documentation
nav:
  - Home: index.md
  - Modules: modules.md
theme: readthedocs
plugins:
  - search
  - mermaid2
extra_javascript:
  - https://unpkg.com/mermaid/dist/mermaid.min.js
markdown_extensions:
  - admonition

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 39 (16 by maintainers)

Commits related to this issue

Remove HTML prettify and improve documentation - In on_post_page(), remove do not prettify the whole code; only prettify the tag added (issue #14) - Mention that default configuration works o... — committed to fralau/mkdocs-mermaid2-plugin by deleted user 4 years ago

Most upvoted comments

@kerrerain I checked it with YOUR code - and - bam - error

checked MkDocs.yml file tataaa: found the problem

try this:

site_name: Issue 11 of mkdocs-mermaid2-plugin
site_author: kerrerain
copyright: Copyright kerrerain, &copy; 2020

theme:
   name: material
nav:
  - Home: index.md

plugins:
  - search
  - mermaid2:
      version: 8.7.0

IMPORTANT Your have to install before: pip install mkdocs-material

and than :

mrRobot62 on Sep 4, 2020