ToolCabana

Редактор диаграмм Mermaid

Просматривайте очищенные диаграммы и экспортируйте их в SVG или PNG.

Favorites are saved in this browser. Find them in My favorites.

Редактор диаграмм Mermaid

Your input stays in this browser unless stated otherwise
Clear your input, files and result, and restore the default settings.
Load sample text to explore what this tool can do. This replaces your current input.
0 charactersClear the source text.

Как использовать Редактор диаграмм Mermaid

The Mermaid diagram editor renders Mermaid text, such as a flowchart LR definition, into a diagram preview and lets you download it as SVG or PNG. Rendering runs in Mermaid's strict security mode, and the SVG is sanitized to remove scripts and embedded HTML. Diagrams can be up to 20,000 characters and 300 lines.

  1. Вставьте исходные данные в редактор ввода или загрузите встроенный пример.
  2. Выберите формат скачивания.
  3. Запустите «Редактор диаграмм Mermaid», просмотрите результат и используйте доступные элементы копирования или скачивания.

Что поддерживает этот инструмент

Просматривайте очищенные диаграммы и экспортируйте их в SVG или PNG.

Формат скачивания
SVG · PNG

Ограничения и обработка

Изображения используют существующее ограничение холста в 32 мегапикселя. Там, где это поддерживается, допускается до 100 исходных изображений. Вставленный HTML ограничен 200 000 символами, диаграммы Mermaid — 20 000 символами и 300 строками. Для создания SVG и PNG требуется браузер.

Пример исходных данных
flowchart LR
  A[Choose a tool] --> B[Add your input]
  B --> C[Review the result]

Частые вопросы

How do I export a Mermaid diagram as PNG?

Paste your Mermaid code, set Download format to PNG and run the editor. The sanitized SVG is drawn onto a canvas and saved as diagram.png, capped at 8,000 pixels per side. Choose SVG instead for a scalable vector file.

Why is my Mermaid init directive or front matter rejected?

Configuration directives such as %%{init: ...}%% and front matter blocks starting with --- are disabled for safety, and the editor returns an error if they appear. Themes and other settings in those blocks are not applied, so remove them before rendering.

Why do HTML labels not appear in my diagram?

Diagrams render with Mermaid's strict security level and flowchart HTML labels turned off, and the output is sanitized to strip script and foreignObject elements. Use plain-text labels inside node brackets, such as A[Choose a tool], instead of HTML markup.

Где обрабатываются мои данные?

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

Каковы ограничения входных данных?

Изображения используют существующее ограничение холста в 32 мегапикселя. Там, где это поддерживается, допускается до 100 исходных изображений. Вставленный HTML ограничен 200 000 символами, диаграммы Mermaid — 20 000 символами и 300 строками. Для создания SVG и PNG требуется браузер.