Render Mermaid diagrams to PNG/SVG with terminal-noir theming
npm install @voidwire/visual-mermaidRender Mermaid diagrams to PNG/SVG with terminal-noir theming.
- Config-driven - Theme, dimensions, output format from config file
- Terminal-noir - Cyan/slate color palette designed for dark backgrounds
- Composable - JSON output pipes to jq and other tools
- Multiple inputs - Inline code, file, or stdin
``bash`
cd packages/visual-mermaid
bun link
Requires mmdc (mermaid-cli) installed:
`bash`
npm install -g @mermaid-js/mermaid-cli
Copy config.example.toml to ~/.config/visual-mermaid/config.toml:
`bash`
cp config.example.toml ~/.config/visual-mermaid/config.toml
`toml`
theme = "terminal-noir"
background = "#0a0e14"
format = "png"
width = 1200
height = 800
output_dir = "~/.local/share/visual-mermaid/output"
`bashInline code
visual-mermaid --code "flowchart TD; A-->B" -o diagram.png
Options
| Flag | Description |
|------|-------------|
|
--code | Mermaid diagram code (inline) |
| -i, --input | Input .mmd file |
| -o, --output | Output file (required) |
| -f, --format | Output format: png, svg, pdf |
| -w, --width | Width in pixels |
| -H, --height | Height in pixels |
| -b, --background | Background color |
| --theme | Theme: terminal-noir, dark, default |
| --open | Open output file (macOS) |
| -h, --help | Show help |Output
`json
{
"path": "/absolute/path/to/diagram.png"
}
`On error:
`json
{
"error": "mmdc not found. Install with: npm install -g @mermaid-js/mermaid-cli"
}
`Themes
| Theme | Description |
|-------|-------------|
|
terminal-noir | Cyan accents on deep slate (#0a0e14) |
| dark | Default mermaid dark theme |
| default` | Vanilla mermaid styling || Code | Meaning |
|------|---------|
| 0 | Success |
| 1 | Render error (mmdc failed) |
| 2 | Client error (missing args, invalid options) |