mermaid-isomorphic in mcp-mermaid codebase.

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

1. What is mermaid-isomorphic?

2. What is mermaid?

3. 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);
}

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/hustcc/mcp-mermaid/blob/main/src/utils/render.ts

2. https://github.com/hustcc/mcp-mermaid/blob/main/package.json

3. https://www.npmjs.com/package/mermaid-isomorphic