beautiful-mermaid: Fast SVG and ASCII Rendering for Mermaid Diagrams

Repositorylukilabs/beautiful-mermaidTool

beautiful-mermaid is a TypeScript library developed by Craft that renders Mermaid diagrams synchronously as SVG or ASCII art. It runs with zero DOM dependencies and is built for web interfaces and AI CLI assistants.

Key points

  1. Dual rendering targets: Generates polished SVG files for web interfaces and ASCII/Unicode output for terminal environments.
  2. Synchronous execution: Employs ELK.js layout engine with a FakeWorker bypass to produce output instantly without async promises, ideal for React useMemo.
  3. Zero DOM overhead: Pure TypeScript architecture functions consistently across server, desktop, and client runtimes, rendering 100+ diagrams in under 500ms.
  4. Flexible theming: Includes 15 built-in themes, full Shiki theme compatibility for VS Code styles, and live switching via CSS custom properties.
  5. Broad diagram support: Handles flowcharts, sequence diagrams, state machines, class diagrams, ER diagrams, and XY charts.

Why it matters

Standard Mermaid renderers depend heavily on browser DOM APIs, present complex theming layers, and lack native CLI output. beautiful-mermaid eliminates these constraints, making diagram integration into AI assistants and lightweight dev tools frictionless.

Analysis

Built originally to power diagrams in Craft Agents, beautiful-mermaid solves common friction points around Mermaid layout and styling. Porting the Go-based mermaid-ascii to TypeScript allows dual ASCII/SVG support in a single package. Backed by Craft and gathering over 11,000 GitHub stars, the library shows clear production readiness for developer tools and automated workflows.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:oh-my-mermaid/oh-my-mermaid

    Oh-my-mermaid: AI-Driven Architecture Diagrams for Codebases

    Oh-my-mermaid (omm) is a CLI tool and AI skill that analyses complex codebases to generate hierarchical architecture documentation powered by Mermaid diagrams.

    2.5kstarsTypeScript

    AI & LLMs· Tool

  • Repository:tt-a1i/archify

    Archify: Interactive Architecture and System Diagrams for AI Coding Agents

    Archify is an open-source Node.js rendering and validation engine designed as a skill for coding agents like Cursor, Claude Code, Codex CLI, and OpenCode. Agents produce a typed JSON Intermediate Representation (IR), which Archify deterministically compiles into self-contained, interactive HTML, SVG, and media exports.

    45.5kstarsJavaScript

    AI & LLMs· Tool

  • Repository:cathrynlavery/diagram-design

    Diagram Design: Editorial HTML and SVG Diagrams for AI Coding Agents

    Diagram Design is a skill and template framework for AI agents like Claude Code, Codex, and Pi. It produces 39 editorial diagram types as self-contained HTML and SVG, avoiding common Mermaid clichés and generic AI styling.

    30.2kstarsHTML

    AI & LLMs· Tool

  • X post:Trending GitHub Repositories

    diagram-design: Editorial SVG and HTML Diagrams for AI Coding Agents

    The diagram-design repository by Cathryn Lavery introduces a plugin for Claude Code, Codex, and compatible agents that generates 39 editorial-quality diagram types as self-contained HTML and SVG. It aims to eliminate generic Mermaid-style layouts and manual Figma redesigns.

    1.2kbookmarks86.3kviews

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.