Способы рисовать диаграммы в популярных аутлайнерах

Статус: Росток ☘️ | Посажено: Авг. 20, 2022 – Обновлено: Апр. 15, 2023

Доступные варианты в Roam Research, Logseq, RemNote, SiYuan и Emacs (org-mode / org-roam). В списке те способы рисования диаграмм, которые встроены в сами приложения. Плюс некоторые популярные сторонние решения.

С помощью плагинов и Custom CSS можно "прикрутить" к аутлайнерам всё что угодно :0) Но постоянно отслеживать, тестировать и потом регулярно обновлять информацию про все такие "поделки" — просто не реально. Поэтому список ограниченный.

Сразу предупреждаю, что ждать такого же функционала, как у специализированных mapping- и diagramming-приложений пока не стоит (SimpleMind, Xmind, Draw.io, Miro и т.д.). Хотя ощутимые подвижки к этому есть.

Сейчас в аутлайнерах доступны только базовые варианты для визуализаций. Но вскоре ожидается, что в основных приложениях добавят полноценные продвинутые Whiteboards, которые позволят объединять между собой заметки в Базе знаний и диаграммы на холсте.

Что такое Excalidraw, Mermaid, Graphviz — читайте подробнее на их сайтах. Это распространнёные решения для визуализации, которые встраивают во многие программы.


Logseq

1. Встроенный Excalidraw (с первых версий приложения)

Простые whiteboards с фигурами / блоками текста / стрелками / рисованием. Диаграмма добавляется на страницу через командное меню в виде блока (получается встроенна в неё).

Из минусов: Whiteboards у нас обособлены от заметок. Можно внутри диаграммы сослаться на какую-то страницу / блок, но не более того.

2. В декабре 2022 запустили полноценные Whiteboards нативно интегрированные с аутлайнером

Полная интеграция между собой заметок в Базе знаний и объектов на Whiteboards. Благодаря трансклюзии мы можем визуально группировать и связывать на холсте различные блоки текста и целые страницы, простые фигуры, а также внешние типы мультимедиа (YouTube, изображения, веб-сайты).

Краткое демо:

Подробная информация:

  • Серию постов с анонсом, кратким описанием функционала и gif-ками смотрите в twitter.
  • Детальное описание новых функций в документации.
  • Logseq Whiteboards Demo от 16 декабря на Youtube (1 ч. 25 мин)

Demo сам тоже смотрел, общее представление о работе с whiteboards оно даёт. Но можно и просто в документации "покопаться".

В демонстрации много говорили про концептуальные вещи:

  • глубина интеграции между собой аутлайнера и whiteboards;
  • какие предполагаются контексты использования холста;
  • в какую сторону планируют развивать функции.

3. Есть плагин для простых Mindmap (Markmap Plugin)

Отображение outline в виде mind map. Карта не редактируема. Много горячих клавиш для навигации (сворачивание уровней карты, фокусировка и т.д.).


Roam Research

1. Встроенные простые Diagrams (прямоугольники и стрелки) и поддержка Mermaid-диаграмм

Диаграммы появились ещё в середине 2019 года. В июле 2020 добавилась поддержка Mermaid.

  • Справка на сайте Roam. Там есть живые примеры диаграмм, с которыми можно "поиграться". И ссылки на видеообзоры функций.
  • Короткая и понятная инструкция «How to build diagrams in Roam Research» на сайте Ness Labs.

Как визуально выглядят Diagrams:

Пример диаграммы

2. 13 апреля 2023 добавили встроенную поддержку Excalidraw

Доступно через slash menu: /excalidraw. Принцип работы абсолютно такой же, как в Logseq, так что не буду дополнительно размещать фото / видео.

3. Есть сторонние расширения, но мало

Например, для отображения outline в виде простых mindmap. Был ещё интересный Roam-Excalidraw plugin, созданный Zsolt Viczián. Он поддерживал двусторонние ссылки на холсте. Но, на сколько знаю, он больше не поддерживается и не развивается.


RemNote

1. Штатный Graph editor позволяет создавать простые Concept map

Но работать с ним откровенно неудобно. Эта функция была запущена ещё в начале 2021 года для «галочки», тогда у пользователей был хайп по визуализациям заметок в виде «Графа». Вот разработчики для кучи её и добавили. После этого они к ней не возвращались и серьёзно не дорабатывали.

2. Плагин «Rem Tree» для создания простых mind map

Дерево outline по сути развернуто горизонтально и в таком виде мы с ним работаем. Так как это стандартные блоки аутлайнера, то в них можно использовать иконки, ссылки, картинки и т.д.

Мне лично его хватает для повседневной работы, чтобы накидывать простые mind map.

22 08 20 outliner dia rn rem tree

3. Есть плагин для создания Mermaid-диаграмм

Про него особо писать нечего, стандартная работа для данного типа диаграмм.


SiYuan

1. Встроенная поддержка Mermaid, Graphviz, plantUML…

В меню много пунктов с разными типами диаграмм:

22 08 20 outliner dia si menu

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

22 08 20 outliner dia si mermaid

2. Есть так же сторонние плагины для создания диаграмм (например, Excalidraw)

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


Emacs (org-mode / org-roam)

1. Есть пакеты для работы с Mermaid, Graphviz, plantUML.

Их легко найти по поиску в хранилище пакетов MELPA. Библиотеки в пакетах типовые, как это в целом работает можно посмотреть на предыдущем скриншоте 🔺

2. Есть несколько вариантов для создания mind map и concept map.

Но из них пока ничего не понравилось, поэтому не могу рекомендовать.

В emacs вообще весь расширенный функционал завязан на сторонние пакеты. Их тысячи и регулярно появляются новые. Скорее всего есть ещё какие-то интересные варианты работы с визуализациями, просто они мне пока не попались на глаза.

Если что, пишите в сообщения страницы в VK. Потестирую и добавлю здесь в список.