# Jsx Md Beautiful Mermaid

> Render Mermaid diagrams as ASCII/Unicode art inside @theseus.run/jsx-md components. Use when adding a <BeautifulMermaid> component to a .tsx file that renders Markdown via render(), or when a prompt or document needs a diagram rendered as terminal-friendly ASCII art.

- **Type:** Skill
- **Install:** `agentstack add skill-theseus-run-theseus-jsx-md-beautiful-mermaid`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [theseus-run](https://agentstack.voostack.com/s/theseus-run)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [theseus-run](https://github.com/theseus-run)
- **Source:** https://github.com/theseus-run/theseus/tree/master/packages/jsx-md-beautiful-mermaid/skills/jsx-md-beautiful-mermaid
- **Website:** https://www.theseus.run

## Install

```sh
agentstack add skill-theseus-run-theseus-jsx-md-beautiful-mermaid
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# @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:

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

Import:

```ts
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.**

```tsx
// 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.**

```tsx
// 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.**

```tsx
// 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.**

```tsx
// 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](https://github.com/theseus-run)
- **Source:** [theseus-run/theseus](https://github.com/theseus-run/theseus)
- **License:** MIT
- **Homepage:** https://www.theseus.run

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-theseus-run-theseus-jsx-md-beautiful-mermaid
- Seller: https://agentstack.voostack.com/s/theseus-run
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.