Skip to content

Rendering charts without the mermaid class #29

@JeremyCanfield

Description

@JeremyCanfield

Line 95 in mermaidediting.ts sets class to language-mermaid.

const code = writer.createContainerElement( 'code', {
  class: 'language-mermaid'
});

Which causes CKEditor to create HTML that has class="language-mermaid", something like this.

<pre>
  <code class="language-mermaid">
    flowchart TB
    A --> B
  </code>
</pre>

Lines 102 - 110 in sample/index.html have the following HTML, which has both the mermaid and language-mermaid classes, which seems to suggest that both classes should be in <code>.

<pre>
  <code class="mermaid language-mermaid">
    flowchart TB
    A --> B
  </code>
</pre>

If I have an HTML page with the following, the Mermaid flowcharts are not rendered, and instead the raw HTML is displayed. I suspect this is happening because the mermaid class is not included. I'm not sure how to get the Mermaid flowcharts to render.

<pre>
  <code class="language-mermaid">
    flowchart TB
    A --> B
  </code>
</pre>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions