tessl/npm-mermaid-js--mermaid-cli

Command-line interface for converting Mermaid diagrams to SVG, PNG, and PDF formats

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Mermaid CLI

Name: tessl/npm-mermaid-js--mermaid-cli
Author: tessl

Mermaid CLI is a command-line interface for converting Mermaid diagram definitions into various output formats including SVG, PNG, and PDF. It provides both a CLI tool (mmdc) and a Node.js API for programmatic usage, supporting single diagrams, batch processing of markdown files, and extensive customization options.

Package Information

Package Name: @mermaid-js/mermaid-cli
Package Type: npm
Language: JavaScript (ESM) with TypeScript support
Installation: npm install -g @mermaid-js/mermaid-cli

Core Imports

import { run, renderMermaid, cli, error } from "@mermaid-js/mermaid-cli";

For CommonJS:

const { run, renderMermaid, cli, error } = require("@mermaid-js/mermaid-cli");

Basic Usage

CLI Usage

# Basic diagram conversion
mmdc -i diagram.mmd -o diagram.svg

# Convert with dark theme and transparent background
mmdc -i input.mmd -o output.png -t dark -b transparent

# Process markdown file with embedded mermaid diagrams
mmdc -i README.md -o README-processed.md

# Pipe from stdin
cat diagram.mmd | mmdc -i - -o output.svg

Node.js API Usage

import { run } from "@mermaid-js/mermaid-cli";

// Convert single diagram
await run("diagram.mmd", "output.svg");

// Convert with options
await run("input.mmd", "output.png", {
  outputFormat: "png",
  parseMMDOptions: {
    backgroundColor: "transparent",
    mermaidConfig: { theme: "dark" }
  }
});

Architecture

Mermaid CLI is built around several key components:

CLI Interface: Command-line tool (mmdc) with comprehensive option parsing and validation
Core Engine: Uses Puppeteer to render diagrams in a headless browser environment
Format Support: Converts to SVG, PNG, and PDF with configurable styling options
Batch Processing: Processes markdown files containing multiple mermaid code blocks
Node.js API: Programmatic interface for integration into Node.js applications

Capabilities

Command Line Interface

Complete CLI tool for converting Mermaid diagrams with extensive customization options including themes, styling, and output formats.

mmdc [options]

Options:
  -i, --input <input>              Input mermaid file or "-" for stdin
  -o, --output [output]            Output file or "-" for stdout
  -e, --outputFormat [format]      Output format: svg, png, pdf
  -t, --theme [theme]              Theme: default, forest, dark, neutral
  -b, --backgroundColor [color]    Background color for PNG/SVG
  -w, --width [width]              Page width (default: 800)
  -H, --height [height]            Page height (default: 600)
  -s, --scale [scale]              Puppeteer scale factor (default: 1)
  -c, --configFile [file]          JSON configuration file for mermaid
  -C, --cssFile [file]             CSS file for styling
  -I, --svgId [id]                 SVG element ID attribute
  -f, --pdfFit                     Scale PDF to fit chart
  -a, --artefacts [path]           Output artefacts path for markdown input
  -p, --puppeteerConfigFile [file] JSON configuration for Puppeteer
  -q, --quiet                      Suppress log output
  --iconPacks <icons...>           Icon packs to use (Iconify NPM packages)

Command Line Interface

Node.js API

Programmatic interface for rendering Mermaid diagrams within Node.js applications, supporting both high-level operations and fine-grained control.

async function run(
  input: string | undefined,
  output: string,
  options?: RunOptions
): Promise<void>;

async function renderMermaid(
  browser: Browser | BrowserContext,
  definition: string,
  outputFormat: "svg" | "png" | "pdf",
  options?: ParseMDDOptions
): Promise<RenderResult>;

interface RunOptions {
  puppeteerConfig?: LaunchOptions;
  quiet?: boolean;
  outputFormat?: "svg" | "png" | "pdf";
  parseMMDOptions?: ParseMDDOptions;
  artefacts?: string;
}

interface RenderResult {
  title: string | null;
  desc: string | null;
  data: Uint8Array;
}

Node.js API

Types

// Puppeteer types used by the API
interface Browser {
  // Puppeteer browser instance
  close(): Promise<void>;
  newPage(): Promise<Page>;
}

interface BrowserContext {
  // Puppeteer browser context instance
  close(): Promise<void>;
  newPage(): Promise<Page>;
}

interface LaunchOptions {
  // Puppeteer launch configuration
  headless?: boolean | "shell";
  args?: string[];
  timeout?: number;
  executablePath?: string;
  [key: string]: any;
}

interface Viewport {
  width: number;
  height: number;
  deviceScaleFactor?: number;
}

interface ParseMDDOptions {
  viewport?: Viewport;
  backgroundColor?: string | "transparent";
  mermaidConfig?: object;
  myCSS?: string;
  pdfFit?: boolean;
  svgId?: string;
  iconPacks?: string[];
}

interface MarkdownImageProps {
  url: string;
  alt: string;
  title?: string | null;
}