Как создать интеллект-карту с помощью ChatGPT
ChatGPT придумывает тексты, создает ТЗ и даже редактирует код. Но на этом его умения не заканчиваются — он также может создавать красивые и подробные интеллект-карты по запросу. И для этого не придется часами объяснят боту, что делать — хватит. Рассказываю.
Делаем в один этап — даем референс и сразу запрашиваем карту
На основе референса бот сгенерирует нашу будущую карту. Без этого сделать что-то вряд ли получится, потому что chatGPT не напишет тот код, который нужен сайту. Поэтому первым делом нужно скормить ему пример кода, который прочитает сайт-генератор интеллект-карты. В нашем случае это mermaid. js, но есть и другой — markmap. Я работал в обоих и mermaid мне понравился больше — карты в нем получаются красивее и выразительнее.
Важно! Каждый сайт-генератор работает по своим правилам разметки и своему коду. То есть, если вы сгенерируете интеллект-карту под mermaid, этот же код markmap не сработает. Придется выдавать нейросети новый код и просить адаптировать ваш текст под него.
В общем, отправляем боту референс с mermaid и в конце дописываем что-то вроде «используя эту разметку сделай интеллект-карту, в которой будет
Используй следующий пример чтобы отформатировать mindmap в код mermaid.
mindmap
root((mindmap))
Orbit
Theme
::icon(fa fa-laptop)
Pollution
World
Microscope
One<br/>Two
Land
Case
Cloud
Sunny
Pen
Pencil
Paper
Используя язык диаграмм markdown mindmap, создай интеллект-карту, которая отражает бизнес-план для создания и продвижения сайта. Начни с mindmap и root((title)) и добавь тематические иконки.
В ответ вы получите что-то вроде:
Важно! Нейросеть может выдать код, в котором в строке: icon (…) после скобки будет идти текст. В таком случае карта не построится. Чтобы решить проблему, напишите нейросети «в строке, начинающейся с: icon может быть написано только: icon (название иконки). Остальной текст начинай с новой строки».
Этот код нужно скопировать и перейти на сайт mermaid.js.org. А там — вставить код в рабочую область и карта сгенерируется автоматически.
Можете использовать этот пример как готовый промпт, только в конце переделывайте текст под свои нужды.
Используя язык диаграмм markdown mindmap, создай интеллект-карту, которая (______________). Начни с mindmap и root((title)) и добавь тематические иконки.
Делаем в два этапа — преобразуем какой-то план и запрашиваем карту
Если вы хотите представить в виде интеллект-карты какой-то готовый текст, можете сначала показать его нейросети, а потом попросить переписать материал в виде кода. Для этого используйте команду «теперь представь это в виде кода».
Важно! Текст давайте в виде плана, иначе chatGPT неправильно разделит его на смысловые блоки.
Попробуем сначала дать нейросети план, а потом преобразовать его в карту. План тоже придумаем с нейросетью. Тема — как продвигать сайт.
Сначала план получается слишком объемным, в карту его точно не вставишь. Поэтому даем следующую команду: «Сделай этот план в виде 1-2 слов».
Тоже не совсем, то, что надо. Поэтому расширяем план командой «Теперь к каждому пункты придумай подпункты».
И последний шаг — просим преобразовать это в код.
Теперь можно использовать следующий промпт:
Используй следующий пример, чтобы отформатировать mindmap в код mermaid.
mindmap
root((mindmap))
Orbit
Theme
::icon(fa fa-laptop)
Pollution
World
Microscope
One<br/>Two
Land
Case
Cloud
Sunny
Pen
Pencil
Paper
Используя язык диаграмм markdown mindmap, создай интеллект-карту, которая покажет, как продвигать сайт. Используй для этого информацию, которую я запросил ранее. Начни с mindmap и root((title)) и добавь тематические иконки.
Можете использовать этот пример как готовый промпт, только в конце переделывайте текст под свои нужды.
Используя язык диаграмм markdown mindmap, создай интеллект-карту, которая (______________). Используй для этого информацию, которую я запросил ранее. Начни с mindmap и root((title)) и добавь тематические иконки.
Показываем текст боту, а в ответ видим примерно такой код:
Теперь строим карту, как и в первый раз: вставляем код и готово.
Что случилось. Я показал ChatGPT пример кода с mermaid и попросил написать нечто такое же. Но здесь была дополнительная сложность: в коде mermaid используются всевозможные тематические иконки под каждый блок. Нейросеть их проанализировала и подобрала похожие иконки под мою тему.
Если такие иконки вас не устраивают, можно просить заменить их на эмодзи — тоже получается неплохо.
Кроме интеллект-карт в mermaid можно строить диаграммы, (в том числе и Ганта), последовательности, пути клиента и др. Нужную графику можно выбрать в разделе «Sample diagrams».
Например, вот какую диаграмму действий при пожаре получилось сделать в два клика:
Работает здесь все по аналогии с интеллект картами: я дал нейросети референс с mermaid и сказал написать код по аналогии. Цель плана — показать действия при пожаре.
Если хотите увидеть примеры других карт, пишите в комментарии. А пока: берите промпты и пользуйтесь!