The RunOptions interface defines configuration options for the mermaid.run() function, which automatically finds and renders Mermaid diagrams in the DOM.
Properties
The CSS query selector to use when finding elements to render. By default, it looks for elements with the mermaid class.
Specific nodes to render. If this is set, querySelector will be ignored. This allows you to provide an explicit list of elements to render instead of using a selector.
A callback function to call after each diagram is rendered. The function receives the diagram ID as a parameter.
If true, errors will be logged to the console but not thrown. This allows the rendering process to continue even if some diagrams fail.
Example usage
Basic usage with default selector
import mermaid from 'mermaid';
// Renders all elements with class "mermaid"
await mermaid.run();
Custom query selector
import mermaid from 'mermaid';
// Render all elements with class "diagram"
await mermaid.run({
querySelector: '.diagram'
});
Using specific nodes
import mermaid from 'mermaid';
const nodes = document.querySelectorAll('.my-custom-class');
await mermaid.run({
nodes: nodes
});
With post-render callback
import mermaid from 'mermaid';
await mermaid.run({
querySelector: '.mermaid',
postRenderCallback: (id) => {
console.log(`Rendered diagram with id: ${id}`);
// Add custom behavior after each diagram renders
const element = document.getElementById(id);
if (element) {
element.classList.add('rendered');
}
}
});
With error suppression
import mermaid from 'mermaid';
// Continue rendering even if some diagrams have errors
await mermaid.run({
suppressErrors: true,
postRenderCallback: (id) => {
console.log(`Successfully rendered: ${id}`);
}
});
Complete example
import mermaid from 'mermaid';
async function renderAllDiagrams() {
try {
await mermaid.run({
querySelector: '.diagram',
suppressErrors: false,
postRenderCallback: (id) => {
console.log(`Diagram ${id} rendered`);
// Add click handlers or other interactive features
const element = document.getElementById(id);
if (element) {
element.addEventListener('click', () => {
console.log(`Clicked on ${id}`);
});
}
}
});
console.log('All diagrams rendered successfully');
} catch (error) {
console.error('Error rendering diagrams:', error);
}
}
renderAllDiagrams();
Rendering specific elements
import mermaid from 'mermaid';
// Get specific elements to render
const diagramContainers = document.querySelectorAll('.dynamic-diagram');
await mermaid.run({
nodes: diagramContainers,
postRenderCallback: (id) => {
// Track rendered diagrams
analytics.track('diagram_rendered', { id });
},
suppressErrors: true
});
Using with initialization
import mermaid from 'mermaid';
// Initialize with config
mermaid.initialize({
theme: 'dark',
logLevel: 'error'
});
// Then run with options
await mermaid.run({
querySelector: '.mermaid-diagram',
postRenderCallback: (id) => {
console.log(`Rendered ${id} with dark theme`);
}
});
TypeScript definition
export interface RunOptions {
/**
* The query selector to use when finding elements to render. Default: `".mermaid"`.
*/
querySelector?: string;
/**
* The nodes to render. If this is set, `querySelector` will be ignored.
*/
nodes?: ArrayLike<HTMLElement>;
/**
* A callback to call after each diagram is rendered.
*/
postRenderCallback?: (id: string) => unknown;
/**
* If `true`, errors will be logged to the console, but not thrown. Default: `false`
*/
suppressErrors?: boolean;
}
Notes
- The
run() function processes elements that don’t have the data-processed attribute
- Elements are marked with
data-processed="true" after rendering to prevent re-rendering
- If both
querySelector and nodes are provided, nodes takes precedence
- The
postRenderCallback is called for each successfully rendered diagram
- When
suppressErrors is true, the first error encountered will still be logged but won’t stop execution
- Use
mermaid.initialize() before mermaid.run() to set global configuration