A command-line tool to convert Mermaid diagrams to high-resolution PNG images.
- Convert
.mmdfiles to PNG images - Extract and convert Mermaid diagrams from Markdown (
.md) files - High-resolution output with configurable scaling
- Multiple theme options (default, dark, forest, neutral, base, coder)
- Custom background colors (including transparent)
- Path completion for easier file selection
- Multiple diagram extraction from a single Markdown file
- Bun runtime (v1.2.17 or later)
# Clone the repository
git clone https://github.com/tadeasf/mermaid2png.git
cd mermaid2png
# Install dependencies
bun install
# Make the script executable
chmod +x ./src/index.ts
# Optional: Create a symlink to use it globally
sudo ln -s "$(pwd)/src/index.ts" /usr/local/bin/mermaid2png# Install directly from the repository
bun install -g github:tadeasf/mermaid2png
# Or install from the local directory
cd mermaid2png
bun run install-global# Clone the repository
git clone https://github.com/tadeasf/mermaid2png.git
cd mermaid2png
# Install dependencies
bun install
# Compile the executable
bun run compile
# The executable will be created as 'mermaid2png' in the current directory
# Move it to a directory in your PATH to use it globally
sudo mv mermaid2png /usr/local/bin/# Convert a Mermaid file to PNG
bun run src/index.ts path/to/diagram.mmd
# Or if you installed it globally
mermaid2png path/to/diagram.mmdmermaid2png <input-file> [output-file] [theme] [background-color] [scale] [width] [height]
input-file: Path to a Mermaid (.mmd) or Markdown (.md) fileoutput-file: (Optional) Path for the output PNG filetheme: (Optional) Mermaid theme (default, dark, forest, neutral, base, coder)background-color: (Optional) Background color (white, transparent, or hex color)scale: (Optional) Scale factor for resolution (default: 2)width: (Optional) Width in pixels (default: 1920)height: (Optional) Height in pixels (default: 1080)
If you run the tool without arguments, it will prompt you for each parameter with helpful defaults:
bun run src/index.tsmermaid2png flowchart.mmdmermaid2png flowchart.mmd output.png dark transparentmermaid2png flowchart.mmd output.png default white 4 3840 2160mermaid2png document.mdThe tool supports the following Mermaid themes:
default: Standard light themedark: Dark background themeforest: Green-based themeneutral: Balanced color themebase: Minimal themecoder: Developer-friendly theme