Редактируйте документы Lucid в Visual Studio Code.

Подключите VS Code к своей учетной записи Lucid.

Для установки расширения Lucid для VS Code выполните следующие действия:

1. Откройте приложение VS Code.
2. Перейдите в магазин расширений, нажав на соответствующую кнопку. Значок «Расширения» находится на панели опросов в левой части окна.
   • Или нажмите Ctrl + Shift + X (ПК) или Cmd + Shift + X (Mac), чтобы использовать сочетание клавиш.
3. Найдите "Lucid" в магазине приложений VS Code.
4. Нажмите кнопку «Установить» в правой части карточки расширения.
5. Следуйте инструкциям, чтобы войти в свою учетную запись Lucid.
6. Откройте палитру команд и введите «Lucid».
   • Или нажмите Cmd + Shift + P (ПК) или Ctrl + Shift + P (Mac).
7. Откройте существующее объявление или создайте новое.
8. Редактирование диаграммы.
9. Нажмите кнопку «Сохранить в кодовую базу» в правом верхнем углу редактора.
10. Выберите папку репозитория.
11. Следуйте инструкциям на вашем устройстве, чтобы сохранить изменения.

Работа с диаграммами Lucid в VS Code

Создайте и откройте диаграмму Lucid

Чтобы создать или открыть диалог, выполните следующие действия в VS Code:

1. Откройте палитру команд. 
   • Или нажмите Cmd + Shift + P (ПК) или Ctrl + Shift + P (Mac), чтобы использовать сочетание клавиш.
2. Найдите и выберите Lucid: Открыть документ или Lucid: Создать новый документ.
3. В появившемся рядом с исходным кодом окне выбора документа выберите нужный документ или нажмите «Создать документ».

Обновить существующую диаграмму Lucid

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

1. Откройте документ Lucid в VS Code.
2. Нажмите В верхней части редактора находится наглядная иконка.
3. Редактируйте документ Lucid в VS Code.
4. Нажмите «Сохранить в кодовую базу».
5. Выберите папку репозитория.
6. Следуйте инструкциям на вашем устройстве, чтобы сохранить изменения.

Чтобы убедиться в успешном сохранении обновлений, выполните следующие действия:

1. Редактируйте и сохраняйте документ Lucid в VS Code.
2. Закройте вкладку редактора Lucid и вкладку предварительного просмотра диалогов.
3. В проводнике файлов выберите файл PNG вашей диаграммы, чтобы открыть обновленный предварительный просмотр.

Преобразование синтаксиса Mermaid в объекты Lucid.

Чтобы вставить изображение русалки из Claude Code, Cursor, Codex или любого другого места и получить редактируемые фигурки в документе Lucid, выполните следующие шаги:

1. Скопируйте исходный код Mermaid.
2. Вставьте код в любое место на панели расширения Lucid.

Расширение преобразует код в стандартные, редактируемые фигуры и линии Lucid.

Преобразуйте код Mermaid в файлах вашего проекта в Lucid.

Расширение Lucid для VS Code может обнаруживать диаграмму Mermaid в файлах вашего проекта и преобразовывать их в формат Lucid. Он работает со следующими типами файлов:

• .md и .mdx: Расширение обнаруживает и обрабатывает каждый блок кода Mermaid в файле, без ограничений по количеству блоков.
• .mmd: Это расширение рассматривает весь файл как одну диаграмму.

Чтобы преобразовать файл в формат Mermaid, выполните следующие действия в VS Code:

1. В VS Code откройте файл .md. .mdx, или .mmd файл, содержащий код Mermaid.
2. Нажмите «Преобразовать в Lucid». 
   • В файле .md или .mdx В этом файле он располагается непосредственно над каждым блоком кода Mermaid. 
   • В файле .mmd Этот файл отображается в самом верху файла.

Расширение проверяет синтаксис Mermaid перед экспортом. Если система обнаружит ошибку, она выделит проблему и отменит передачу в Lucid. Устраните синтаксическую ошибку, затем снова нажмите «Преобразовать в Lucid» .

После проверки расширение создаст новый документ Lucid для этого документа, а также два локальных файла, сохраненных в той же папке, что и исходный файл:

• Экспортированная диаграмма в выбранном вами формате (PNG, SVG или JSON).

• Файл-справка .lucid

Преобразование выполняется индивидуально — для каждого блока кода Mermaid или файла .mmd. Этот файл генерирует собственный документ Lucid. Чтобы экспортировать несколько диалогов из одного файла, нажмите кнопку «Преобразовать в Lucid» над каждым диалогом, который вы хотите преобразовать.

Как обрабатываются ваши файлы

• Локальное обнаружение: при открытии поддерживаемого файла расширение полностью сканирует его на вашем устройстве для обнаружения блоков кода Mermaid. На этом этапе никакие данные не покидают ваше устройство.
• Обработка по запросу: содержимое ваших файлов остается строго локальным до тех пор, пока вы не инициируете экспорт. Данные отправляются в Lucid только после того, как вы явно нажмете кнопку «Преобразовать в Lucid».
• Проверка перед загрузкой: расширение локально проверяет синтаксис Mermaid для всех поддерживаемых типов файлов. Если синтаксис содержит ошибки, процесс немедленно останавливается, и ничего не передается.

Изменения синхронизации между веб-редактором Lucid и VS Code.

Чтобы предварительный просмотр в VS Code отражал последние изменения, внесенные в Lucid, выполните следующие действия:

1. Откройте документ Lucid в VS Code.
2. Нажмите «Открыть» Значок внешней ссылки находится в верхней части редактора.
3. Следуйте инструкциям, чтобы открыть веб-версию Lucid.
4. В появившемся всплывающем окне веб-версии Lucid отредактируйте свою программу.
5. Закрыть веб-версию.
6. Вернуться в VS Code.
7. В проводнике файлов VS Code выберите любой другой файл, затем снова щелкните по PNG-файлу вашей диаграммы, чтобы обновить отображение.
8. Чтобы отрендерить последнюю версию, нажмите кнопку «Обновить Lucid PNG» в левом нижнем углу редактора.

Сохраните диаграмму в свою кодовую базу

Сохраните изображение в формате PNG и облегченный файл-ссылку (.lucid) непосредственно в свой локальный репозиторий, чтобы вы могли добавить их в свой код. Вот как это сделать:

1. Редактируйте холст непосредственно в VS Code.
2. Выберите пункт «Сохранить в кодовую базу» в правом верхнем углу меню расширения.
3. Выберите папку репозитория.
4. Следуйте инструкциям на вашем устройстве, чтобы сохранить изменения.

Ограничения редактора VS Code

Благодаря встроенному в редактор интерфейсу вы получаете расширенную версию веб-редактора Lucid, адаптированную для быстрого просмотра и обновления кода непосредственно рядом с ним. Для доступа ко всем функциям, включая перечисленные в таблице ниже, откройте документ в веб-версии Lucid.

Помощь всё ещё нужна

Часто задаваемые вопросы

Ресурсы

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

Пост в сообществе

Теперь Lucid работает внутри VS Code.

Оставьте отзыв об этой статье