mermaid
11.4.0
Создавайте диаграммы из текста, похожего на уценку.
Живой редактор!
Документация | Начало работы | CDN | ? Присоединяйтесь к нам
简体中文
Попробуйте превью будущих выпусков Live Editor: Develop | Следующий
? Русалка была номинирована и выиграла премию JS Open Source Awards (2019) в категории «Самое захватывающее использование технологии»!!!
Спасибо всем участникам: людям, отправляющим запросы на включение, людям, отвечающим на вопросы!
О
Примеры
Выпускать
Связанные проекты
Авторы
Схемы безопасности и безопасности
Сообщение об уязвимостях
Признательность
Mermaid — это инструмент для создания диаграмм и диаграмм на основе JavaScript, который использует текстовые определения на основе Markdown и средство визуализации для создания и изменения сложных диаграмм. Основная цель Mermaid — помочь документации идти в ногу с развитием.
Док-Рот — это «Уловка-22», которую Русалка помогает решить.
Создание диаграмм и документация отнимают драгоценное время разработчиков и быстро устаревают. Но отсутствие диаграмм и документации снижает производительность и вредит организационному обучению.
Mermaid решает эту проблему, позволяя пользователям создавать легко модифицируемые диаграммы. Его также можно сделать частью рабочих сценариев (и других фрагментов кода).
Mermaid позволяет даже непрограммистам легко создавать подробные диаграммы с помощью Mermaid Live Editor.
Видеоуроки можно найти на нашей странице Учебники. Используйте Mermaid со своими любимыми приложениями. Ознакомьтесь со списком интеграций и вариантов использования Mermaid.
Вы также можете использовать Mermaid в GitHub, а также многие другие ваши любимые приложения — ознакомьтесь со списком интеграций и вариантов использования Mermaid.
Более подробное введение в Mermaid и некоторые из ее основных применений можно найти в Руководстве для начинающих, использовании и обучающих материалах.
Наше PR-тестирование визуальной регрессии проводится на базе Argos с их щедрым планом с открытым исходным кодом. Это упрощает процесс рассмотрения PR с визуальными изменениями.
В процессе выпуска мы в значительной степени полагаемся на визуальные регрессионные тесты с использованием инструментов applitools. Applitools — отличный сервис, который легко использовать и интегрировать с нашими тестами.
Ниже приведены некоторые примеры диаграмм, диаграмм и графиков, которые можно создать с помощью Mermaid. Нажмите здесь, чтобы перейти к синтаксису текста.
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] блок-схема LR
A[Жесткий] -->|Текст| Б (круглый)
B --> C{Решение}
C -->|Один| Д[Результат 1]
C -->|Два| Е[Результат 2] ЗагрузкаsequenceDiagram Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
последовательностьдиаграмма
Алиса->>Джон: Привет, Джон, как дела?
цикл HealthCheck
Джон->>Джон: Борьба с ипохондрией
конец
Обратите внимание на право Иоанна: Рациональные мысли!
Джон-->>Алиса: Отлично!
Джон->>Боб: А ты?
Боб -->>Джон: Очень хорошо! Загрузкаgantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d
Гантт
раздел Раздел
Завершено: сделано, дез.1, 6 января 2014 г., 08 января 2014 г.
Активный :active, des2, 07.01.2014, 3d
Параллельный 1: des3, после des1, 1d
Параллель 2: des4, после des1, 1d
Параллель 3: des5, после des3, 1d
Параллель 4: des6, после des4, 1d ЗагрузкаclassDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
} классДиаграмма
Class01 <|-- AveryLongClass : Круто
<<Интерфейс>> Класс01
Class09 -> C2: Где я?
Класс09 --* C3
Класс09 --|> Класс07
Класс07: равно()
Class07: Object[] elementData
Класс01: размер()
Класс01: внутренний шимпанзе
Class01: внутренняя горилла
класс Класс10 {
<<сервис>>
внутренний идентификатор
размер()
} ЗагрузкаstateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] --> Еще
Еще --> [*]
Все еще --> Переезд
Движение -> Неподвижно
Перемещение --> Авария
Сбой --> [*] Загрузкаpie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
пирог
«Собаки»: 386
«Кошки» : 85,9
«Крысы»: 15 Загрузкаgantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
Гантт
title Проблемы с Git – дней с момента последнего обновления
датаФормат X
Формат оси %s
раздел Issue19062
71 : 0, 71
раздел Issue19401
36 : 0, 36
раздел Выпуск 193
34 : 0, 34
раздел Issue7441
9 : 0, 9
раздел Выпуск 1300
5 : 0, 5 Загрузкаjourney title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me
путешествие
Название Мой рабочий день
раздел Иди на работу
Заварить чай: 5: Я
Поднимитесь наверх: 3: Я
Выполните работу: 1: Я, Кот.
раздел Иди домой
Спускайтесь вниз: 5: Я.
Садись: 3: Я ЗагрузкаC4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") C4Контекст
title Контекстная диаграмма системы для системы Интернет-банкинга
Person(customerA, «Банковский клиент A», «Клиент банка с личными банковскими счетами.»)
Person(customerB, «Банковский клиент B»)
Person_Ext(customerC, «Банковский клиент C»)
System(SystemAA, «Система Интернет-банкинга», «Позволяет клиентам просматривать информацию о своих банковских счетах и совершать платежи.»)
Person(customerD, «Банковский клиент D», «Клиент банка, <br/> с личными банковскими счетами.»)
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, «Мэйнфрейм-банковская система», «Хранит всю основную банковскую информацию о клиентах, счетах, транзакциях и т. д.»)
System_Boundary(b2, "BankBoundary2") {
Система(СистемаА, «Банковская система А»)
System(SystemB, «Банковская система B», «Система банка с личными банковскими счетами.»)
}
System_Ext(SystemC, «Система электронной почты», «Внутренняя система электронной почты Microsoft Exchange.»)
SystemDb(SystemD, «База данных банковской системы D», «Система банка с личными банковскими счетами.»)
Граница(b3, "BankBoundary3", "граница") {
SystemQueue(SystemF, "Банковская система F Очередь", "Система банка с личными банковскими счетами.")
SystemQueue_Ext(SystemG, «Банковская система G Queue», «Система банка с личными банковскими счетами.»)
}
}
BiRel(клиентA, SystemAA, «Использование»)
BiRel(SystemAA, SystemE, «Использование»)
Rel(SystemAA, SystemC, «Отправка электронной почты», «SMTP»)
Rel(SystemC, customerA, «Отправляет электронные письма») ЗагрузкаДля тех, у кого есть на это разрешение:
Обновите номер версии в package.json .
НПМ опубликовать
Приведенная выше команда создает файлы в папке dist и публикует их на https://www.npmjs.com.
Интерфейс командной строки
Живой редактор
HTTP-сервер
Mermaid — это растущее сообщество, которое всегда принимает новых участников. Есть много разных способов помочь, и мы всегда ищем дополнительные руки! Посмотрите этот выпуск, если хотите знать, с чего начать помогать.
Подробную информацию о том, как внести свой вклад, можно найти в руководстве по вкладам.
Для общедоступных сайтов получение текста от пользователей в Интернете может быть ненадежным, поскольку этот контент сохраняется для представления в браузере на более позднем этапе. Причина в том, что пользовательский контент может содержать встроенные вредоносные скрипты, которые будут запускаться при представлении данных. Для Mermaid это риск, особенно потому, что диаграммы русалок содержат много символов, которые используются в HTML, что делает стандартную санитарию непригодной для использования, а также нарушает работу диаграмм. Мы по-прежнему прилагаем усилия для очистки входящего кода и продолжаем совершенствовать процесс, но трудно гарантировать отсутствие лазеек.
В качестве дополнительного уровня безопасности для сайтов с внешними пользователями мы рады представить новый уровень безопасности, при котором диаграмма отображается в изолированном iframe, предотвращая выполнение javascript в коде. Это большой шаг вперед для повышения безопасности.
К сожалению, вы не можете одновременно съесть торт и съесть его, что в данном случае означает, что некоторые интерактивные функции блокируются вместе с возможным вредоносным кодом.
Чтобы сообщить об уязвимости, отправьте электронное письмо по адресу [email protected] с описанием проблемы, шагами, которые вы предприняли для ее создания, затронутыми версиями и, если известно, способами устранения проблемы.
Небольшая заметка от Кнута Свейдквиста:
Огромное спасибо проектам d3 и dagre-d3 за предоставление библиотек графического макета и чертежей!
Также спасибо проекту js-sequence-diagram за использование грамматики для диаграмм последовательности. Спасибо Джессике Питер за вдохновение и отправную точку для рендеринга Ганта.
Спасибо Тайлеру Лонгу, который сотрудничает с апрелем 2017 года.
Спасибо постоянно растущему списку участников, которые продвинули проект так далеко!
Русалка была создана Кнутом Свейдквистом для упрощения документирования.
