Posted on Sep 14 • Originally published at thinkthroo.com

mermaid-isomorphic in mcp-mermaid codebase.

In this article, we review mermaid-isomorphic in mcp-mermaid codebase. We will look at:

What is mermaid-isomorphic?
What is mermaid?
Usage in mcp-mermaid codebase.

What is mermaid-isomorphic?

Render Mermaid diagrams in the browser or Node.js.

This is useful if you wish to render Mermaid diagrams in a Node.js or an isomorphic environment. If you want to render Mermaid diagrams in the browser directly, use the mermaid package directly.

Install

npm install mermaid-isomorphic

Usage

import { createMermaidRenderer } from 'mermaid-isomorphic' const renderer = createMermaidRenderer() const diagram = ` graph TD; A-->B; A-->C; B-->D; C-->D; ` const results = await renderer([diagram]) console.log(results)

Learn more about mermaid-isomorphic.

What is mermaid?

JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Learn more about mermaid.js

Usage in mcp-mermaid codebase.

In mcp-mermaid/src/utils/render.ts, you will find the below import:

import { type MermaidRenderer, type RenderResult, createMermaidRenderer, } from "mermaid-isomorphic";

This createMermaidRendered is used as shown below:

/** * Ref: * - https://github.com/mermaid-js/mermaid-cli/blob/master/src/index.js * - https://github.com/remcohaszing/mermaid-isomorphic * @returns */ export async function renderMermaid( mermaid: string, theme = "default", backgroundColor = "white", ): Promise<RenderResult> { if (!renderer) renderer = createMermaidRenderer(); const cssContent = `svg { background: ${backgroundColor}; }`; const cssTmpPath = path.join(os.tmpdir(), "mermaid-tmp-css.css"); fs.writeFileSync(cssTmpPath, cssContent); const r = await renderer([mermaid], { // Image is needed. screenshot: true, css: cssTmpPath, mermaidConfig: { // biome-ignore lint/suspicious/noExplicitAny: <explanation> theme: theme as any, }, }); const r0 = r[0] as PromiseSettledResult<RenderResult>; return r0.status === "fulfilled" ? r0.value : Promise.reject(r0.reason); }