ink-mermaid

Render Mermaid diagrams as ASCII/Unicode in Ink-based terminal UIs.

A thin Ink wrapper around beautiful-mermaid. No browser, no headless Chrome, no external CLI — pure TypeScript, runs anywhere Node runs.

Install

npm install ink-mermaid ink react

ink and react are peer dependencies.

Usage

import React from 'react';
import {render, Box, Text} from 'ink';
import {Mermaid} from 'ink-mermaid';

const code = `graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action 1]
  B -->|No| D[Action 2]
  C --> E[End]
  D --> E`;

function App() {
  return (
    <Box flexDirection="column">
      <Text bold>My diagram</Text>
      <Mermaid code={code} />
    </Box>
  );
}

render(<App />);

Output:

┌───────┐     ◇──────────◇        ┌──────────┐     ┌─────┐
│ Start ├────►│ Decision │ ├─Yes─►│ Action 1 ├────►│ End │
└───────┘     ◇─────┬────◇        └──────────┘     └─────┘
                    │                                 ▲
                    │             ┌──────────┐        │
                    └─────No─────►│ Action 2 ├────────┘
                                  └──────────┘

Props

| Prop | Type | Description | | ---------- | ----------------------------------- | -------------------------------------------------------------------------- | | code | string | Mermaid source code. Required. | | useAscii | boolean | Use plain ASCII (+, -, \|) instead of Unicode box-drawing characters. | | options | RenderOptions | Extra options forwarded to beautiful-mermaid (padding, color mode, ...). | | fallback | (error: Error) => ReactNode | Rendered when the Mermaid source fails to parse. | | onError | (error: Error) => void | Called when the Mermaid source fails to parse. |

Supported diagram types

Whatever beautiful-mermaid supports — currently Flowchart, State, Sequence, Class, ER, and XY charts. See the beautiful-mermaid docs for the authoritative list.

Known upstream issues

These limitations come from beautiful-mermaid, not from ink-mermaid. The corresponding tests in this repo are marked with test.failing() so they automatically flip green once the upstream library fixes them.

• --o and --x edge styles drop the target node (as of [email protected]). Example: graph LR; A --o B renders only A. Tracked at lukilabs/beautiful-mermaid#109.
• Diagram types not supported by beautiful-mermaid produce a parse error, which <Mermaid> surfaces via fallback / onError. Currently affected: pie, gantt, journey, mindmap.

License notice

This package is MIT. The underlying beautiful-mermaid is MIT, and its layout engine elkjs is EPL-2.0. Using ink-mermaid as a runtime dependency does not trigger EPL obligations.

Run the example

git clone https://github.com/mk668a/ink-mermaid
cd ink-mermaid
npm install
npm run example