Не начинайте с пустого редактора. В mermaid.design встроена галерея готовых шаблонов диаграмм — откройте один из них, измените код и сделайте его своим.
Открытие галереи
Нажмите Шаблоны в навигационной панели, чтобы открыть галерею для текущего режима рендеринга:
/templates— шаблоны, отрендеренные официальным (SVG) движком с вашей активной темой/ascii/templates— те же шаблоны в виде ASCII-графики
Каждая карточка галереи рендерится в реальном времени с вашей текущей темой, поэтому то, что вы видите, — именно то, что вы получите обратно в редакторе.
Поиск шаблона
Галерея включает блок-схемы, диаграммы последовательности, диаграммы классов, диаграммы состояний, ER-диаграммы, диаграммы Ганта, круговые диаграммы, Git-графы, интеллект-карты, пользовательские сценарии и многое другое.
Используйте фильтры в верхней части, чтобы сузить список по типу диаграммы. Если шаблон не поддерживается текущим режимом рендеринга (например, некоторые типы диаграмм пока нельзя отрендерить в ASCII), он скрывается автоматически, а уведомление показывает, сколько шаблонов было отфильтровано.
Применение шаблона
- Нажмите на карточку шаблона.
- Подтвердите диалог перезаписи — применение шаблона заменяет код, который сейчас находится в редакторе. Это действие нельзя отменить.
- Вы вернётесь в редактор с загруженным и отрендеренным кодом шаблона.
Из галереи нажмите К редактору в навигационной панели, чтобы вернуться в редактор, ничего не применяя.
Советы
- Сначала примените шаблон, затем смените тему — шаблон мгновенно подхватит ваши переменные темы.
- Шаблоны — отличный способ выучить синтаксис Mermaid: откройте один, затем редактируйте код и наблюдайте, как меняется превью.