# Beauty Diagram

> Beauty Diagram turns Mermaid and PlantUML source into presentation-ready diagrams. Paste diagram-as-code, get a clean, themed SVG or PNG suitable for slide decks, docs, and READMEs — with shareable links and embeds.

Key facts:

- Supported inputs: Mermaid (flowchart, sequence, class, state, ER, gantt, pie, mindmap, gitGraph, XY chart, C4), PlantUML (activity, swimlane, sequence, class, state, ER, gantt, mindmap), draw.io XML, and SVG import.
- Outputs: themed SVG and PNG export, transparent backgrounds, share links with embeddable image URLs.
- CJK-aware text layout: Chinese/Japanese/Korean labels wrap and fit correctly.
- Free to use in the browser; Pro plans remove the export watermark and unlock more themes and export quota.

## Core pages

- [Editor](https://www.beauty-diagram.com/editor): paste Mermaid or PlantUML and preview the beautified result live
- [Templates](https://www.beauty-diagram.com/templates): ready-to-edit diagram templates by use case
- [Diagram types](https://www.beauty-diagram.com/diagram-types): syntax reference and examples per diagram type
- [Guides](https://www.beauty-diagram.com/guides): how-to guides for making diagrams presentation-ready
- [Pricing](https://www.beauty-diagram.com/pricing): free vs Pro vs Premium plans

## Tools and integrations

- [Developer API](https://www.beauty-diagram.com/developers/api): REST API for rendering and exporting diagrams (`https://api.beauty-diagram.com/v1/*`)
- [CLI](https://www.beauty-diagram.com/integrations): `npm i -g @beauty-diagram/cli` — `bd` command for extracting and rendering diagrams from Markdown
- [VS Code extension](https://www.beauty-diagram.com/integrations/vscode): beautified diagram previews inside Markdown
- [Obsidian plugin](https://www.beauty-diagram.com/integrations/obsidian): render Mermaid blocks in your vault as presentation-grade diagrams

## Popular landings

- [Mermaid beautifier](https://www.beauty-diagram.com/mermaid-beautifier)
- [PlantUML beautifier](https://www.beauty-diagram.com/plantuml-beautifier)
- [Flowchart to PNG](https://www.beauty-diagram.com/flowchart-to-png)
- [Flowchart to SVG](https://www.beauty-diagram.com/flowchart-to-svg)
- [Blog](https://www.beauty-diagram.com/blog): articles on diagram-as-code workflows

## Optional

- [FAQ](https://www.beauty-diagram.com/faq)
- [Comparisons](https://www.beauty-diagram.com/comparison): how Beauty Diagram differs from other diagram tools
- [Use cases](https://www.beauty-diagram.com/use-cases)