Просмотр Markdown на Mac,который рисует диаграммы Mermaid.

Напишите диаграмму текстом в блоке кода с пометкой mermaid, и DotMD нарисует её на странице. Ничего не уходит с вашего Mac: всё работает офлайн, в светлой и тёмной теме.

macOS 14 или новее. Чтение бесплатно; редактирование и ревью оплачиваются один раз.

Коротко

DotMD — программа для просмотра Markdown на Mac с поддержкой Mermaid. Блок кода с пометкой mermaid рисуется как блок-схема, диаграмма последовательности, классов, состояний или «сущность — связь», диаграмма Ганта, круговая диаграмма, интеллект-карта, временная шкала или граф git, офлайн и в цветах вашей темы. Просмотр бесплатный; писать с живым предпросмотром можно в DotMD Editor.

Какие диаграммы Mermaid рисует DotMD?

В DotMD встроен Mermaid 10.9. Он рисует диаграммы этих видов, а в редакторе для каждого есть готовый шаблон:

  • Блок-схемы и диаграммы состояний: шаги, решения и переходы.
  • Диаграммы последовательности: кто что кому отправляет, по порядку.
  • Диаграммы классов и диаграммы «сущность — связь»: типы, таблицы и связи между ними.
  • Диаграммы Ганта и временные шкалы: планы и события во времени.
  • Круговые диаграммы, интеллект-карты и графы git.

Диаграмма остаётся текстом в вашем .md-файле, поэтому её легко менять, а каждая правка видна в истории версий.

Как посмотреть Mermaid в Markdown-файле на Mac

Блок кода с пометкой mermaid становится на странице диаграммой вместо исходного текста.

  1. Откройте файл

    Нажмите ⌘O и выберите .md-файл или его папку либо перетащите файл на DotMD. Каждая диаграмма рисуется при открытии страницы.

  2. Рассмотрите поближе

    Нажмите на диаграмму, чтобы увидеть её крупно поверх страницы. Жестом сведения пальцев увеличьте её до 8×, перетаскиванием сдвиньте, а клавишей Esc вернитесь.

  3. В тон теме

    Диаграммы следуют за страницей: они рисуются светлыми или тёмными цветами в зависимости от темы, которую вы выбрали в меню Aa.

Пишите Mermaid с живым предпросмотром

Редактирование входит в DotMD Editor. Нажмите Edit или ⌘E и включите Preview (⌥⌘E): диаграмма перерисовывается рядом с текстом по мере набора, а щелчок по ней переходит к её коду.

Insert → Diagram вставляет в файл рабочий пример любого из десяти видов, готовый к правке.

Mermaid в Quick Look, PDF и HTML

Нажмите пробел на .md-файле в Finder, и в просмотре тоже появятся диаграммы: просмотр Markdown через Quick Look.

Export as PDF… рисует диаграммы до создания PDF: Markdown в PDF на Mac. Экспортированный HTML-файл при открытии загружает Mermaid из интернета.

Если диаграмма не появляется

  • Проверьте первую строку: в ней назван вид диаграммы, например flowchart TD или sequenceDiagram.
  • Подпись со скобками, двоеточиями или кавычками возьмите в двойные кавычки: "…".
  • Ошибка в синтаксисе показывает сообщение об ошибке Mermaid вместо рисунка.

Вопросы о Mermaid на Mac

Показывает ли DotMD диаграммы Mermaid офлайн?

Да. Mermaid встроен в DotMD и рисует на вашем Mac, без подключения к интернету. Только экспортированный HTML-файл загружает его из интернета.

Бесплатно ли смотреть диаграммы Mermaid?

Да. Чтение Markdown с диаграммами, папки, вкладки и Quick Look бесплатны навсегда. Редактирование с живым предпросмотром входит в DotMD Editor, $14.99 один раз.

Какие диаграммы Mermaid можно использовать?

Блок-схемы, диаграммы последовательности, классов, состояний и «сущность — связь», диаграммы Ганта, круговые диаграммы, интеллект-карты, временные шкалы и графы git. В редакторе для каждого есть шаблон.

Как править Mermaid с живым предпросмотром?

В DotMD Editor нажмите ⌘E, затем ⌥⌘E. Диаграмма перерисовывается рядом с текстом по мере набора.

Другие вопросы