The Mermaid Diagram block

• Part of: LH Mermaid

Add Mermaid Diagram from the inserter on any post type, type the diagram in Mermaid syntax, and use the toolbar’s Preview button to see it drawn. Source returns to the text. Wide and full alignment and an HTML anchor are supported.

How it is stored

The block is static. The diagram source is saved as the plain text of a pre element and nowhere else, so it is versioned by revisions and anything that can write post content can write a diagram:

<!-- wp:lh-mermaid/diagram -->
<pre class="wp-block-lh-mermaid-diagram mermaid">flowchart LR
  A[Draft] --> B{Review}
  B -->|Approved| C[Publish]</pre>
<!-- /wp:lh-mermaid/diagram -->

Inside the pre, escape < and & as entities. > may be written raw or as >; both draw the same.

How it is drawn

• Mermaid and a small stylesheet are loaded only on requests that render a diagram.
• The library turns the source into an SVG in the browser. In feeds, email and anywhere without JavaScript, readers see the source text as an ordinary preformatted block.
• The library is excluded from LH Defer Javascript’s lazy loading (through its lh_defer_javascript_exclude_scripts filter), because Mermaid draws on the page load event and a late-loaded library would draw nothing.
• In LH Presentations decks, diagrams are drawn slide by slide as each slide is shown.

Hiding the block

There is no setting. To remove the block from the inserter somewhere, filter lh_mermaid_block_enabled, which receives $enabled, the post being edited and the editor context:

add_filter( 'lh_mermaid_block_enabled', function ( $enabled, $post ) {
    return ( $post && 'page' === $post->post_type ) ? false : $enabled;
}, 10, 2 );