Mermaid 12.3.0 · настоящая библиотека в браузере
Сначала опишите. Потом покажите.
Девять задач для документации, проектирования и общения с командой. Меняйте текст и получайте свою SVG-схему. Данные остаются в этой вкладке.
Выберите задачу
Описание схемы
До 12 000 символов и 200 строк. Ctrl+Enter — построить. Начните с небольших изменений.
Загружаем Mermaid…
Результат
Схема появится после построения.
Широкую схему можно прокручивать внутри области. SVG пригодится в документации и презентации; .mmd — для дальнейшего редактирования.
Как подключить в свой интерфейс
import mermaid from 'mermaid';
mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
const { svg } = await mermaid.render('diagram-1', source);
// В мастерской SVG дополнительно очищается DOMPurify.
// Не включайте loose для чужих описаний.Описание схемы не выполняет бизнес-процесс и не синхронизируется с сервером. После перезагрузки изменения сбросятся — скачайте исходник.