Как создавать редактируемые диаграммы с помощью ChatGPT и Mermaid
С последующим импортом в Miro, Lucid, etc.
Без воды, соплей, пота и крови. (Но с кликами)
Многие скажут: «Эй, парень, так есть же полно плагинов в %вставьте_тул%, которые уже давно все это делают!» И окажутся правы, плагины действительно есть даже в самом чате, но мое решение удобно следующим:
- Это 100% рабочая схема (схема, хехе, ну вы поняли), которая не выдаст вам внезапную ошибку по пути, тогда как плагин может просто сказать «Ой, что-то сломалось»
- Ваши данные не будут отправлены третьим лицам, так как используются исключительно опенсорсные продукты (за исключением самого чата)
- Ну и если это опенсорс — это значит все взаимодействие тут бесплатно и вы ограничены лишь лимитами чата. Плагины или схожий AI-функционал во многих продуктах окружен пэйволлом.
- Интерфейс — это не скромное окошко с единственным полем ввода и отсутствующей (или очищающейся после окончания сессии) историей запросов, а наглядный процесс, простите, синергии нескольких тулов с сохранением файлов локально.
Сабж
Сама инструкция (сори за ненумированный список, но оказывается в редакторе комитета нельзя вставлять картинки в списки, поэтому пришлось костылить):
- Открываете ChatGPT (сойдет версия 3.5)
- Даете задачу создать диаграмму с описанием необходимых вам параметров. Здесь необходимо указать ключевое слово Mermaid syntax.
- Копируете результат
- Открываете draw.io
- Кликаете на жирный плюсик на панели инструментов, далее: Advanced → Mermaid...
- Вставляете в поле окошка ваш код и жмете Insert
- Проверяете что получилось
- Сохраняете полученный файл File → Export as → VSDX (beta)...
- Открываете Miro, на панели Projects слева внизу жмете на кнопку Import diagram
- В модалке выбираете сохраненный выше файл, жмете Import
- Создается новый файл с вашим флоучартом, где можно редактировать любой элемент.
- ???
- PROFIT!
FAQ
Какие типы диаграмм можно создавать?
Пока лишь те, что понимает Mermaid: обычные флоу- и пайчарты, диаграммы классов (UML), майндмэпы, (внезапно) Гантт и самое вкусное — джорни мэпы. Но список расширяется! Подробнее в документации:
Кому будет полезен подобный гайд?
Дизайнерам, аналитикам, менеджерам, разработчикам — тем, кто работает с диаграммами и хочет создавать их приблизительное начертание на основе описания и дорабатывать в привычном сервисе.
draw.io жалуется на какую-то ошибку при вставке кода, что я делаю не так?
Скорее всего, проблема именно на стороне сервиса, он иногда капризничает с новыми документами. Сначала нужно убедиться, что ваша диаграмма действительно рабочая — запустите mermaid.live и вставьте код в панель слева. Если схема отображается верно, то вернитесь в draw.io, добавьте на канвас любой элемент, сохраните файл, заново откройте его и попробуйте снова вставить ваш код. Такая перегрузка документа мне всегда помогала.
В Figjam можно импортировать такие файлы?
Технически можно. С помощью экспорта в SVG из того же draw.io. Но только функционально это будет иметь смысла меньше, чем с Миро, потому что объекты прочитаются как просто фигуры, без связей.
ChatGPT может выдать код в XML, который будет содержать информацию о цвете объектов и в целом будет более функционален.
Да, может. Но шанс, что код будет рабочим с первой итерации, не очень высок. Плюс, чат выдает код постепенно, и иногда может просто остановиться на процессе генерации. Не знаю, проблема только у меня или это известный баг, но на возню с XML я тратил много времени.
А что с Powerpoint? VSDX — это же документ Microsoft Visio.
Увы, в том и дело, что это Microsoft. Удивительно, но в современных версиях офиса Visio совсем плох и не интегрируется с другими программами, так что импортировать диаграмму в Powerpoint не получится.
Спасибо за внимание! Буду рад комментариям.
я, как ещё более ленивый, пошёл дальше.
сейчас ChatGpt может принимать файлы на входе, не только текст.
поэтому, я кидаю ему фото своего наброска графика от руки, и прошу сненерировать код в mermaid, чтобы визуализировать.
да, с распознаванием моего кривого почерка иногда бывают шероховатости, но основную работу по генерации нотации в mermaid, чат делает.
Я так понимаю, с помощью нейросетей можно сделать совершенно все
Просто и потому гениально, спасибо