«Русалочка» в ПланФиксе: добавили просмотр файлов формата «mermaid»

Русалка — по-английски «mermaid». Почему формат файла, в котором с помощью текста создаются диаграммы и визуализации, назван именно так – сказать трудно. Иногда понять гиков тяжело.

Но факт остаётся — теперь в ПланФиксе появился ещё один инструмент представления информации. Диаграмму можно быстро создать, показать в задаче и при необходимости также быстро отредактировать. Но обо всём по порядку.

Зачем mermaid в ПланФиксе

Чтобы вы представляли, о чём именно мы дальше будем говорить, покажу диаграмму, которую нарисовал с помощью обычного текста:

flowchart TD
     A[Давай подумаем] --> B{Ты молодец?};
     B -->|Нет| C[Ладно];
     C --> D[Подумай ещё];
     D --> B; B --->|Да| E[Красавчик!];
Диаграмма файла в формате «mermaid»
Диаграмма файла в формате «mermaid».
По клику картинка откроется в новом окне и большем размере.

Такой диаграммой объяснить логику взаимодействия «чего-то» с «чем-то» гораздо быстрее и проще, нежели описывать всё текстом. Например, наши разработчики теперь активно применяют такие диаграммы:

sequenceDiagram
    User->>+Browser: open file
    Browser-->>+Server: /file/mermaid with fileID
    Server-->>-Browser: HTML
    Browser->>-User: rendered HTML
Ещё одна диаграмма файла в формате «mermaid»
Ещё одна диаграмма файла в формате «mermaid».
По клику картинка откроется в новом окне и большем размере.

Другие виды диаграмм можно увидеть в справке Mermaid. Например, в ней показано, как текстом нарисовать диаграмму Ганта.

Как нарисовать диаграмму

Рекомендую использовать онлайн редактор Mermaid Live Editor. Он сразу показывает итоговый результат вашего творчества:

Mermaid Live Editor
Mermaid Live Editor.
По клику картинка откроется в новом окне и большем размере.

Обратите внимание, 5 строк короткого текста развернулись в понятную диаграмму. Просто волшебно!

Изучите простой синтаксис в документации, либо воспользуйтесь стандартными заготовками, которые есть в онлайн редакторе.

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

Как сохранить файл диаграммы

Расскажу на примере операционной системы Windows. В macOS, как обычно, примерно тоже самое:

  • Открываем блокнот.
  • Добавляем нужный текст, скопировав его из онлайн редактора.
  • Вызываем окно сохранения файла: «Файл» – «Сохранить как».
  • В появившемся окне указываем кодировку UTF-8 и формат файла .mmd или .mermaid:
Сохраняем файл в формате «mermaid»
Сохраняем файл в формате «mermaid».
По клику картинка откроется в новом окне и большем размере.
  • Теперь полученный файл можно добавить в задачу ПланФикса.

Что в итоге

  • «Русалочка» есть в ПланФиксе, и файлы такого формата можно просматривать.
  • Объяснить сложную логику взаимодействия «чего-то» с «чем-то» прямо в комментариях задачи стало гораздо проще и быстрее.
  • Да и в целом, это просто интересно — рисовать диаграммы текстом.


Не забывайте о наших социальных сетях: ВКонтакте, Telegram и ВК Видео. Там появляются новости о доработках и новинках. Подпишитесь, чтобы ничего не пропустить.

25 комментариев

  1. Аватар

    Очень и очень хорошая идея!

    А можно ли сделать так, чтобы мы крепили такие схемы в одном из квадратиков справа в шаблоне задачи, и они были бы доступны в задачах по этому шаблону? Ну или не шаблон, а доступность таких файлов-подсказок определялась бы условиями, как у кнопок процесса. Тогда человек будет получать только ту схему, которая нужна ему здесь и сейчас. Чтобы мы давали человеку подсказку сразу без отрыва от производства.

    1. Аватар

      Степан, это просто файл. Его можно добавить в поле типа “Файл” в шаблоне задаче. Или я не правильно понял ваш вопрос?

  2. Аватар

    Отлично!! Быстро сделали! А я запрашивал в сентябре.

    Ещё бы у markdown добавили синтаксис GitHub Flavored Markdown чтобы таблицы отрисовывались.

    1. Аватар

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

  3. Аватар

    Я что то слабо понимаю зачем это надо 🙂 Возможно не дорос… Можно примеры где вы этим пользуетесь?
    Пока я вижу обычную блок схему и есть куча программ которые это делают не текстом, а просто рисуя И то что тут надо писать 5 строчек текста (а да еще изучить язык надо), я нарисую просто мышкой… и это лично мне удобно….
    Но опять таки повторюсь! Может я не дорос :)))) и тут спрятано то что я не вижу…

      1. Аватар

        Гуглил слово “Проприета́рное” спасибо за новое знание 🙂

        В общем наверно проще смериться что не понадобиться в работе мне эта штука и жить дальше 🙂

        Ну или дальше ждать новых статей как это используют 🙂

      2. Аватар

        С рисовкой схем вообще сложно.

        был MS Visio но его убрали из офиса и перенесли в отдельную подписку. Под macOS есть аналоги − дорогущий OmniGraffle, слишком простой diagrams.app и mindmap’ы всех сортов и расцветов (mindnode, ithoughts).

        Использовать какой-то онлайн сервис (app.diagrams.net / mindmeister.com) прикольно до тех пор пока не начали теряться данные или чудить с подписками.

        Поэтому mermaid выглядит хорошей альтернативой, пусть и сложной поначалу.

  4. Аватар

    Создал тестовый файл, около 30 сущностей, добавил. При просмотре файла схема не помещается целиком, скроллбары не видны, “сдвинуть” схему, чтобы посмотреть детально тоже не получается. Неудобно.

    1. Аватар

      Отправьте, пожалуйста, такой файл нам в Службу поддержки и попросите коллег подключить меня к задаче. Попробуем что-то придумать.

  5. Аватар

    Круто, конечно … но когда появится возможность работы с обычными текстовыми файлами? (С любыми расширениями) прямо в планфикс?
    Создать в задаче текстовый файл (например XML) и отправить его – куда более нужная задача, имхо. Заодно и такие диаграммы автоматически создавать можно будет …

    1. Аватар

      Андрей, у нас на такую доработку очень мало запросов сейчас, если честно. Могли бы вы написать в службу поддержки с подробным описанием примера, зачем вам нужна возможность создавать XML в задаче. Заодно мы добавим ваш голос в пользу такой доработки.
      А ещё о своих предложения можно рассказать на нашем форуме, где люди голосуют за понравившиеся идеи. Популярные – мы рассматриваем и реализуем.

      1. Аватар

        Мне кажется, что Андрей говорит о возможности править текстовые файлы непосредственно в планфиксе.
        Ну т.е. чтобы для этого не нужно было “промежуточное звено” в виде блокнота (или любого иного текстового редактора).

        Было бы ОЧЕНЬ удобно, если эти mermaid-файлы можно было бы исправлять непосредственно в планфиксе.
        Также как и любые другие текстовые файлы (в том числе и XML )) )

      2. Аватар

        1. Править любые файлы как текстовые (можно по расширению: txt, xml, …, mmd)
        2. Создавать текстовый файл с любым расширением
        3. Применять регулярные выражения для преобразования любых файлов (в основном текстовых).

        Примеры:
        – создавать формализованные документы (по приказам Минфина, ФНС, формализованные на уровне информационной системы …). Например, счет в печатном виде создать в Планфикс можно, а вот по той же номенклатуре (аналитикам, по которым заполняется счет …) как создать УПД? Но если создать УПД (просто регулярными выражениями заменить содержимое текстового шаблона) получаем готовый документ, который можно загрузить в любую ЭДО для отправки (в некоторые даже “автоматически”.
        – сложный json запрос … гораздо удобнее иметь текстовый файл, в который внести изменения и новый результат (содержимое, тут сохранять не надо или сохранять временно) отправлять уже штатными механизмами Планфикс.
        – получать ответы json/xml штатными механизмами для последующей обработки (в том числе нескольких ответов/файлов)
        – та же страница html – это текстовый файл. В некоторых задачах гораздо удобнее было бы формировать такие файлы и вкладывать в письма … Или иметь возможность ее исправить прямо в Планфикс

        Это то6 что прямо насущное, но область применения гораздо, гораздо шире. Например – как править диаграммы по этому посту???

        1. Аватар

          И еще, может быть очень полезным xslt преобразования. Тогда из любого набора данных (обычно xml) можно получить любой выходной файл (например xslx, docx …).
          Но это уже следующий шаг, после полной поддержки текстовых файлов …

        2. Аватар

          Пока таких планов, к сожалению, нет. Сейчас есть редактирование через PFEditor – оно решает вопрос с редактированием любых файлов.
          И касательно шаблонов текстовых документов – такая задача есть в очереди разработки.

            1. Аватар

              Тема с 17 года.
              Вопросов по текстовым файлам (любое расширение: txt, xml, html …) полно (мы года за три задавали раз 10 …, наши клиенты может больше).
              Воз и ныне там.
              Зато отображается mermaid … который текстовый и который невозможно редактировать (и нет «шаблонов»).

Добавить комментарий