Mermaid.js — это библиотека JavaScript с открытым исходным кодом, которая позволяет создавать разнообразные диаграммы и диаграммы с помощью простого текстового синтаксиса. В этом подробном руководстве мы рассмотрим ключевые функции mermaid.js и предоставим примеры для создания блок-схем, диаграмм последовательности, диаграмм Ганта и многого другого.

Обзор

Mermaid была создана в 2015 году Кнутом Свейдквистом для упрощения процесса создания диаграмм и диаграмм для целей документации. Некоторые ключевые преимущества использования mermaid.js включают в себя:

  • Текстовый синтаксис. Нет необходимости в громоздком программном обеспечении для построения диаграмм. Просто напишите синтаксис русалки в редакторе кода.
  • Поддерживает множество типов диаграмм — блок-схемы, диаграммы последовательности, диаграммы классов, диаграммы состояний, круговые диаграммы и многое другое.
  • Широкие возможности настройки — настраивайте цвета, формы, направления, стиль и многое другое.
  • Интегрируется со многими приложениями — работает с распространенными языками разметки, такими как Markdown, различными редакторами кода, вики и т. д.
  • Открытый исходный код — русалка находится в свободном доступе по лицензии MIT.

Начиная

Есть несколько простых способов начать работу с русалкой:

  • Воспользуйтесь онлайн-редактором по адресу http://mermaidjs.github.io/mermaid-live-editor, чтобы мгновенно опробовать его.
  • Установите интерфейс командной строки mermaid для создания диаграмм и файлов SVG.
  • Включите библиотеку mermaid.js в свой HTML-документ.

Вот и все! Теперь давайте посмотрим, как создавать диаграммы.

Блок-схемы

Блок-схемы — отличный способ визуализировать процессы и рабочий процесс. Вот синтаксис русалки для простой блок-схемы:

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

Некоторые ключевые моменты о синтаксисе блок-схемы:

  • graph TD — обозначает блок-схему сверху вниз. Используйте TB для обозначения снизу вверх.
  • Прямоугольники для событий — []
  • Бриллианты за условные — {}
  • Стрелка --> для линий

Существует множество вариантов настройки блок-схем, таких как изменение направления, оформление узлов и многое другое.

Диаграммы последовательности

Диаграммы последовательности полезны для визуализации взаимодействий между объектами во времени. Вот простой пример диаграммы последовательности:

sequenceDiagram
    User->>Computer: Enter username & password
    Computer->>API: Send login request
    API-->>Computer: Return authentication token 
    Computer->>User: Display welcome message

Синтаксис прост:

  • Актеры слева и справа — User, Computer, API
  • Сообщения между актерами — -> и -->>

Опять же, возможны многие настройки, такие как стилизация актеров и сообщений.

Диаграммы Ганта

Для планирования проекта русалка может создавать диаграммы Ганта, показывающие задачи, сроки и зависимости.

gantt
    title Example Gantt Diagram
    section Section
    Task 1            :a1, 2022-01-01, 30d
    Task 2       :after a1, 20d
    section Another 
    Task 3        :2022-01-12, 12d
    Task 4            : 24d

Несколько советов по синтаксису Ганта:

  • title - Название диаграммы
  • section – Группирует задачи вместе
  • Task – название задачи, идентификатор, дата начала, продолжительность.
  • after - Определить зависимости

Возможны многие другие типы диаграмм, такие как диаграммы классов, круговые диаграммы, графики Git и диаграммы ER. Для получения полной информации обратитесь к документации русалки.

Настройка и тематика

Хотя темы русалок по умолчанию довольно хороши, вы можете настроить практически все:

  • Изменение цвета — #hexcodes
  • Изменение формы и стиля — css classes
  • Применение тем — готовых или пользовательских

Это позволяет вам настроить внешний вид диаграммы именно так, как это необходимо для вашего варианта использования.

Интеграция и использование

Ключевым преимуществом русалки является ее интеграция с популярными приложениями и платформами:

  • Встраивание файлов Markdown для вики Github/Gitlab.
  • Интеграция с генераторами статических сайтов, такими как Jekyll.
  • Включите в сайты документации, работающие на Sphinx, MkDocs и других платформах.
  • Встраивание в вики-страницы Confluence
  • Рендеринг в редакторах кода, таких как VS Code.

Также существуют оболочки для React, Vue и Angular для встраивания диаграмм-русалок в веб-проекты.

Расширенные функции и интеграция

Mermaid.js не ограничивается простыми диаграммами. Библиотека предлагает ряд расширенных функций и интеграций, в том числе:

Заключение

Mermaid.js — это универсальный и мощный инструмент для всех, кто хочет визуализировать данные в удобной для пользователя форме. Неудивительно, что благодаря интуитивно понятному синтаксису и широкому спектру функций Mermaid.js стал фаворитом среди разработчиков и энтузиастов обработки данных.

Мы лишь поверхностно коснулись того, что возможно с русалкой. Но, надеюсь, это даст вам представление о том, как легко создавать элегантные диаграммы и диаграммы, используя интуитивно понятный текстовый синтаксис. Широкие возможности настройки в сочетании с широкой интеграцией приложений делают mermaid.js фантастическим выбором для упрощения построения диаграмм.

Чтобы узнать больше, обязательно ознакомьтесь с официальной документацией русалки, в которой подробно описаны все типы диаграмм, функции, использование и примеры. Приятного построения диаграмм!

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

Средний • LinkedIn • Твиттер • Фейсбук • Инстаграм • Веб-сайт

Вам понравилось это произведение? Если да, заставьте значок «Хлопок» танцевать под ваши щелчки, как будто это последний день на Земле! Помните, каждый читатель может услышать аплодисменты до 50 раз!