Ожидание ввода
Что такое редактор диаграмм Mermaid?
Mermaid — это инструмент для создания диаграмм на основе JavaScript, который использует текстовый синтаксис, аналогичный Markdown, для генерации различных диаграмм. Нет необходимости вручную перетаскивать фигуры — достаточно написать простое текстовое описание, и автоматически будут сгенерированы блок-схемы, диаграммы последовательности, диаграммы классов и многое другое.
Этот инструмент предоставляет онлайн-среду редактирования Mermaid с предварительным просмотром в реальном времени, масштабированием перетаскиванием и функциями экспорта, помогая разработчикам быстро создавать и делиться диаграммами.
Как использовать
Основное использование
- Введите синтаксис Mermaid в редакторе слева
- Справа будет отображаться предварительный просмотр диаграммы в реальном времени
- Используйте мышь для перетаскивания диаграммы, колесо для масштабирования
- Нажмите кнопку экспорта для сохранения в формате PNG или SVG
Поддерживаемые типы диаграмм
Примеры
Блок-схема
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> EДиаграмма последовательности
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send ResponseДиаграмма классов
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- CatЧасто задаваемые вопросы
Какие типы диаграмм поддерживаются?
Блок-схемы (graph/flowchart), диаграммы последовательности (sequenceDiagram), диаграммы классов (classDiagram), диаграммы состояний (stateDiagram), ER-диаграммы (erDiagram), диаграммы Ганта (gantt), круговые диаграммы (pie), карты мыслей (mindmap) и карты пути пользователя (journey) — всего 9 типов диаграмм.
Как экспортировать диаграмму?
Нажмите кнопку «Экспорт PNG» или «Экспорт SVG» на правой панели для скачивания диаграммы. Формат PNG подходит для вставки в документы, формат SVG — для векторного редактирования и печати.
Можно ли масштабировать и перемещать диаграмму?
Да. Используйте колесо мыши для масштабирования, удерживайте левую кнопку мыши и перетаскивайте для перемещения диаграммы. Двойной щелчок по области предварительного просмотра сбрасывает вид к начальному состоянию.
Загружаются ли данные на сервер?
Нет. Разбор синтаксиса Mermaid и рендеринг диаграмм полностью выполняются локально в вашем браузере. Ваши данные не покидают ваше устройство, что обеспечивает полную конфиденциальность.