Skip to content

mermaid-support.md

Latest commit

 

History

History
108 lines (77 loc) · 3.04 KB

mermaid-support.md

File metadata and controls

108 lines (77 loc) · 3.04 KB

Mermaid Diagram Support & Render Integration

Traven supports dynamic, visual rendering of Mermaid diagrams inside both the WYSIWYM Editor and the HTML Preview panel. Like LaTeX support, Mermaid is designed as an optional, lazy-loaded feature to keep the core traven.js bundle small and light.

Mermaid support in Traven

1. How Mermaid Support Works

You can write diagrams using standard fenced code blocks with the mermaid language tag:

```mermaid
graph TD
    A[Start] --> B(Process)
    B --> C{Decision}
    C -->|Yes| D[Success]
    C -->|No| E[Fail]
```

In the editor:

  • Interactive Rendering: When the cursor is outside the diagram block, the raw code is replaced with a rendered SVG diagram.
  • Instant Edit Access: Clicking on the diagram swaps it back to raw text so you can edit it.
  • Fallback Mode: If Mermaid is disabled or cannot load, it falls back to a standard syntax-highlighted code block.

Mermaid diagrams in Traven

2. API Configuration

To enable and configure Mermaid, use the global TravenEditor.configureMermaid static method.

Option A: Standard CDN Loading (Recommended)

Pass true to load the default ES module build of Mermaid from jsDelivr:

import { TravenEditor } from "./dist/traven.js";

// Enable Mermaid with default CDN (v11.4.0)
TravenEditor.configureMermaid(true);

Option B: Custom CDN URL

You can specify a custom CDN URL by passing a string:

import { TravenEditor } from "./dist/traven.js";

// Enable with a custom CDN URL
TravenEditor.configureMermaid("https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.esm.min.mjs");

Option C: Object Configuration

You can also pass a configuration object:

import { TravenEditor } from "./dist/traven.js";

TravenEditor.configureMermaid({
  js: "https://my-cdn.com/mermaid.esm.js"
});

3. HTML Preview Integration

When using the editor in a multi-pane layout (like demo-unified.php), you need to trigger diagram rendering on the preview container whenever the HTML is updated.

Use the static TravenEditor.initMermaid method:

const htmlContent = editor.getContentHtml();
previewContainer.innerHTML = htmlContent;

// Trigger Mermaid layout engine on the preview container
TravenEditor.initMermaid(previewContainer);

4. Custom Styling & Themes

You can customize the appearance of the rendered WYSIWYM diagrams by targeting the following CSS classes:

/* Styling for the diagram container in the editor */
.cm-wysiwym-mermaid-container {
  margin: 16px auto;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Styling for rendering error messages */
.mermaid-error-message {
  color: #ef4444;
  font-size: 0.85em;
  margin-top: 8px;
}