Визуализация диаграмм в VS code

Покажу как редактировать диаграмму на языке mermaid и видеть при этом визуализацию в VS Code.

Про синтаксис Mermaid и варианты диаграмм можно почитать отдельно, например, тут.

Примеры для тестиров��ния брала из соседней статьи.

Проблематика и ограничения

Работаю в закрытом контуре, доступ к инструментам визуализации в онлайне ограничен, да и требованиями безопасности запрещено размещать в онлайн-инструментах корпоративные данные.

Мои вводные (или работаем с тем, что имеем)

ПО строго ограничено тем, что есть в компании, в том числе плагины для этого самого ПО, стартовый набор такой:

• Visual studio code (VS Code).

• Markdown Preview Mermaid Support (расширение VS Code).
  Это расширение позволяет просматривать диаграммы Mermaid внутри markdown-файлов в реальном времени прямо в редакторе VS Code.

• markdownlint (расширение VS Code).
  Это расширение анализирует markdown-файлы на соответствие стандартам оформления (например, GitHub Flavored Markdown), помогает писать чистый, читаемый и единообразно оформленный Markdown.

• Mermaid Markdown Syntax Highlighting (расширение VS Code).
  Это расширение добавляет подсветку синтаксиса для блоков Mermaid внутри файлов markdown (.md) и .mmd, .mermaid.

Заранее соглашусь с мнением о том, что можно найти другие плагины при вводе mermaid в поиск расширений - выводится большое количество вариантов, что открывает путь для исследования, но в моём случае, ограничения доходили до того, что на плагины я могу только посмотреть, а вот подгружать в VS Code пришлось руками и выбирать из того, что разрешено и одобрено более мудрыми аналитиками - старожилами.

И так тоже можно:)

Шаги

1. Устанавливаем все плагины

   

   Красивое

2. Создаём файл diagram.md

   

   diagram.md

3. Добавляем код mermaid (пишем или готовый)

   

   Так выглядит валидный синтаксис

   ```mermaid
   sequenceDiagram
       participant V as Ваня
       participant P as Петя
       participant I as Ирина
   
       autonumber
       par Ваня и Петя
           V->>P: Привет, Петя
       and Ваня и Ирина 
           V->>I: Привет, Ирина
       end
       loop Каждые полчаса до ответа
           V->>I: Сколько времени?
       end
       I-->>V: Десятый час
   ```

   1. Не забываем добавлять сверху и снизу указатели разметки:

      ```mermaid

      ```

   • Вызываем опцию "Open Preview"

   

   Опция "Open Preview"

4. Наслаждаемся результатом в соседнем окне

   

   Диаграмма готова!

Какие были трудности лично у меня

1. Диаграмма отображается как текст - необходимо добавить указатели разметки

   

   VS Code не понял что делать

2. Ошибка в синтаксисе mermaid - помогает валидатор, но, чаще всего - скрытые символы мешают (переписать, вырезать-вставить)

   

   Parse error

3. Для больших диаграмм достаточно неудобно, всё зависит от настроек вашего монитора.

Вывод

Достаточно простая инструкция, которая реально может упростить жизнь системного аналитика. Один из вариантов описания которого в явном виде я не нашла, поэтому делюсь.

Мой ТГ.