Как создавать редактирумые диаграммы с помощью ChatGPT и Mermaid

С последующим импортом в Miro, Lucid, etc.

Без воды, соплей, пота и крови. (Но с кликами)

Многие скажут: «Эй, парень, так есть же полно плагинов в %вставьте_тул%, которые уже давно все это делают!» И окажутся правы, плагины действительно есть даже в самом чате, но мое решение удобно следующим:

1. Это 100% рабочая схема (схема, хехе, ну вы поняли), которая не выдаст вам внезапную ошибку по пути, тогда как плагин может просто сказать «Ой, что-то сломалось»
2. Ваши данные не будут отправлены третьим лицам, так как используются исключительно опенсорсные продукты (за исключением самого чата)
3. Ну и если это опенсорс — это значит все взаимодействие тут бесплатно и вы ограничены лишь лимитами чата. Плагины или схожий AI-функционал во многих продуктах окружен пэйволлом.
4. Интерфейс — это не скромное окошко с единственным полем ввода и отсутствующей (или очищающейся после окончания сессии) историей запросов, а наглядный процесс, простите, синергии нескольких тулов с сохранением файлов локально.

Сама инструкция (сори за ненумированный список, но оказывается в редакторе комитета нельзя вставлять картинки в списки, поэтому пришлось костылить):

• Открываете ChatGPT (сойдет версия 3.5)
• Даете задачу создать диаграмму с описанием необходимых вам параметров. Здесь необходимо указать ключевое слово Mermaid syntax.
  

• Копируете результат
  
• Открываете draw.io
• Кликаете на жирный плюсик на панели инструментов, далее: Advanced → Mermaid...
• Вставляете в поле окошка ваш код и жмете Insert

• Проверяете что получилось
• Сохраняете полученный файл File → Export as → VSDX (beta)...
• Открываете Miro, на панели Projects слева внизу жмете на кнопку Import diagram
• В модалке выбираете сохраненный выше файл, жмете Import
• Создается новый файл с вашим флоучартом, где можно редактировать любой элемент.

Какие типы диаграмм можно создавать?
Пока лишь те, что понимает Mermaid: обычные флоу- и пайчарты, диаграммы классов (UML), майндмэпы, (внезапно) Гантт и самое вкусное — джорни мэпы. Но список расширяется! Подробнее в документации:

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

draw.io жалуется на какую-то ошибку при вставке кода, что я делаю не так?
Скорее всего, проблема именно на стороне сервиса, он иногда капризничает с новыми документами. Сначала нужно убедиться, что ваша диаграмма действительно рабочая — запустите mermaid.live и вставьте код в панель слева. Если схема отображается верно, то вернитесь в draw.io, добавьте на канвас любой элемент, сохраните файл, заново откройте его и попробуйте снова вставить ваш код. Такая перегрузка документа мне всегда помогала.

В Figjam можно импортировать такие файлы?
Технически можно. С помощью экспорта в SVG из того же draw.io. Но только функционально это будет иметь смысла меньше, чем с Миро, потому что объекты прочитаются как просто фигуры, без связей.

ChatGPT может выдать код в XML, который будет содержать информацию о цвете объектов и в целом будет более функционален.
Да, может. Но шанс, что код будет рабочим с первой итерации, не очень высок. Плюс, чат выдает код постепенно, и иногда может просто остановиться на процессе генерации. Не знаю, проблема только у меня или это известный баг, но на возню с XML я тратил много времени.

А что с Powerpoint? VSDX — это же документ Microsoft Visio.
Увы, в том и дело, что это Microsoft. Удивительно, но в современных версиях офиса Visio совсем плох и не интегрируется с другими программами, так что импортировать диаграмму в Powerpoint не получится.

Спасибо за внимание! Буду рад комментариям.

#chatgpt #miro #figjam #mermaid #ai