Jsx Md Beautiful Mermaid

@theseus.run/jsx-md-beautiful-mermaid

Single-component companion to @theseus.run/jsx-md. Takes a Mermaid diagram string, calls renderMermaidASCII() from beautiful-mermaid synchronously, and returns a fenced code block (or raw ASCII) as a plain string. No DOM, no SVG, no async.

Setup

Install both packages:

bun add @theseus.run/jsx-md @theseus.run/jsx-md-beautiful-mermaid

Import:

import { render } from "@theseus.run/jsx-md"
import { BeautifulMermaid } from "@theseus.run/jsx-md-beautiful-mermaid"

No tsconfig.json changes needed beyond what @theseus.run/jsx-md already requires.

Authoring rules

1. Diagram source must be multi-line. Single-line graph LR; A --> B syntax is NOT supported.

// WRONG — parser rejects single-line inline syntax
 B --> C" />

// CORRECT — header on its own line
 B --> C`} />

// CORRECT — template literal children (preferred for longer diagrams)

  {`graph LR
    A --> B --> C`}

2. diagram prop takes precedence over children. Don't pass both.

// WRONG — diagram prop wins, children are silently ignored
{flowB}

// CORRECT — use one or the other

{flowB}

3. block={true} (default) wraps output in a fenced code block. Use block={false} only when composing the ASCII string into another context manually.

// Default — output is ```\n\n```\n\n

// Raw — output is the ASCII string only, no fencing

4. Unicode box-drawing is the default. Switch to plain ASCII only for maximum terminal compatibility.

// Unicode (default) — ┌ ─ │ └ ┘ ►

// ASCII — + - | >

Props

Full props table: [references/beautiful-mermaid.md](references/beautiful-mermaid.md).

| Prop | Type | Default | |---|---|---| | diagram | string | — | | children | string | — | | block | boolean | true | | useAscii | boolean | false | | paddingX | number | 5 | | paddingY | number | 5 | | boxBorderPadding | number | 1 |

All other AsciiRenderOptions from beautiful-mermaid are forwarded via spread.

Output shape

```\n\n```\n\n

With block={false}: raw ASCII string, no trailing newline added by this component.

Supported diagram types

Flowcharts, state diagrams, sequence diagrams, class diagrams, ER diagrams, XY charts.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: theseus-run
• Source: theseus-run/theseus
• License: MIT
• Homepage: https://www.theseus.run

Install and usage instructions live in the source repository linked above.