DrawIO Second Open — пришло время перезарядить ваш ProcessOn для получения пожизненного VIP-статуса

Автор этой статьи:Сибэй

Эта статья начинается с точки зрения использования и шаг за шагом рассказывает, что такое DrawIO, почему он основан на DrawIO для вторичной разработки, и основные технические детали вторичной разработки DrawIO, а также абстрагирует набор общих двухоткрытых архитектур, поэтому содержание статьи длинное, на разных этапах читатели могут прочитать по запросу. Общая структура этого документа выглядит следующим образом:

1 - Предыстория вторичных требований к разработке DrawIO(Drawio в глубокое море)

2 - Что такое DrawIO и введение в его использование(демистификация DrawIO)

3 - Этап подготовки к вторичной разработке DrawIO(Горы и реки под сомнением, а старые слезы бегут по коду DrawIO)

4 - Технические детали вторичной разработки DrawIO(Лю Инь Хуа Мин, вы, другая деревня, освоите основной код DrawIO с двумя открытыми кодами)

5 - Подробное объяснение архитектуры вторичной разработки DrawIO(Три размышления о себе, абстрагируя общую архитектуру разработки DrawIO)

задний план

Для рисования различных диаграмм, таких как блок-схемы, диаграммы прототипов, диаграммы топологии, диаграммы UML, интеллект-карты и т. д., вы все еще используете Microsoft Visio, который имеет огромные функции, но должен загружать клиент, а также очень громоздкий? Или вы все еще пользуетесь бесплатной версией ProcessOn, десять картинок наглухо сменяются и перетягиваются туда-сюда.После того, как нарисуете эту картинку, скачайте ее, удалите, а потом нарисуйте другую картинку (конечно, если вы игрок в криптон голд , то я могу только сказать, большой Just be happy~)? В контексте многих из вышеперечисленных проблем у меня есть эта статья, после прочтения которой я надеюсь, что разные читатели могут получить соответствующие выгоды.

• Простой пользователь может получить простой бесплатный инструмент для рисования с неограниченным пространством.
• Опытные разработчики могут легко и быстро создать бесплатное неограниченное пространство и мощный инструмент для рисования для себя и своей команды.
• Продвинутые вторичные разработчики (которые поняли и попробовали вторичную разработку DrawIO) могут освоить новый режим вторичной разработки и постепенно стать экспертом по рыбной ловле.

Немного неловко делать такое большое дело. Чтобы повторить причину, автор в настоящее время в основном отвечает за повышение эффективности линии исследований и разработок в облачной музыке.Однажды продукт и одноклассники по бэк-энду выдвинули требование, что обычно означает, что команде нужен внутренний инструмент для создания диаграмм. , что можно сравнить с текущей компанией.Рабочие процессы соединены последовательно для завершения процесса с обратной связью, потому что текущий режим работы заключается в использовании ProcessOn или других инструментов рисования для продукта/разработки для рисования диаграмм, создания скриншотов/сохранения их локально , а затем вставьте их, потому что ProcessOn имеет ограничения по пространству и не требует, чтобы все были участниками 😂, поэтому лучше просто создать его внутри.

Основываясь на вышеупомянутых официальных/неофициальных причинах, автор начал исследовать конструкцию этой внутренней системы диаграмм и, наконец, после некоторого ожидания подтвердил технический выбор - вторичная разработка на основе DrawIO.

【Уведомление】: Эта статья будет объединена позжеВторичное развитиеУпоминается какдва открытых

В настоящее время основные функции этой системы рисования (чертеж / доступ и т. Д.) были разработаны и использованы во внутреннем тестировании, и автор также дал веб-сайт высокого и атмосферное имя-Overmind-X Graph, давайте посмотрим на текущую стадию эффекта веб-сайта:

Введение в DrawIO

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

КраткоDrawIO — это веб-сайт и инструмент, который поддерживает рисование различных форм диаграмм и поддерживает возможности хранения в нескольких местах.. Не так много можно сказать о функции рисования диаграмм, которая также является основной функцией самого DrawIO.Здесь мы сосредоточимся на возможности хранения DrawIO в нескольких местах.Графики, нарисованные с помощью DrawIO, могут храниться во многих местах в сети, например: кеш браузера, папки на локальном компьютере, удаленное хранилище (Github, Gitlab, Google Drive и т. д.). Браузер хранилища и локальная папка очень просты и не представляются.Здесь мы возьмем Github в качестве примера, чтобы кратко объяснить, как удаленно хранить графики, нарисованные через DrawIO.

Храните DrawIO в репозитории Github

• 1 - Создайте новый репозиторий на Github

Здесь я создал новый под названиемdrawio-folderсклад, есть только одинREADME.mdфайл, как показано на следующем рисунке:

• 2 - Выберите GitHub в качестве места для хранения при рисовании

Затем нажмите кнопку «Пуск» на официальном сайте, чтобы перейти на страницу рисования.При первом входе на страницу будет возможность выбрать место для хранения, как показано на рисунке ниже, а затем выбрать Github (так же, как и другие удаленные принципы хранения).

• 3 - Выберите соответствующий склад и нарисуйте картинку

Нажмите, чтобы выбрать сохранение в репозитории Github, затем выберите создание новой диаграммы, назовите ее и нажмите кнопку «Создать», чтобы завершить создание диаграммы.

• 4 - Авторизовать выбранный репозиторий

После успешного создания значка появится всплывающее окно для авторизованного входа.После авторизованного входа DrawIO может получить всю информацию о складе под учетной записью.Выберите тот, который вы только что создали.drawio-folderсклад, а затем нарисуйте диаграмму.

• 5 - Сохраните документ после рисования

В процессе рисования каждая операция сохранения создаетcommit message, что эквивалентно обычной модификации и отправке хранилища, как показано на следующем рисунке:

Когда график нарисован и сохранен, вы можете перейти в репозиторий Github, чтобы проверить, успешно ли сохранено хранилище.

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

До сих пор я считаю, что все должны были понять, как рисует DrawIO и его мощная функция хранения.Как упоминалось в начале статьи, если вы простой пользователь, достаточно прочитать статью здесь.У вас уже есть бесплатная и Мощные инструменты для рисования (членство не требуется, регистрация и ограничения по рисованию) и множество типов неограниченного пространства для хранения — разве это не ароматно по сравнению с некоторыми приложениями, которые берут за это плату?

Почему DrawIO два открываются?

Поскольку DrawIO сам по себе такой ароматный, зачем вам открывать его дважды? Вот краткое изложение причин, по которым вам нужно открыть или может потребоваться открыть два:

• Прежде всего, команде нужен не просто инструмент для рисования, а интегрированная платформа управления, включающая функции рисования.Рисование — это только основная часть, но есть и другие важные функции.

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

• Наконец, это так называемая вынужденная проблема, грубо говоря, ее можно развернуть в своей компании для самостоятельного развертывания сервисов, зачем ее выносить на улицу? Если бесплатная версия однажды не станет бесплатной или имеет ограничения, она будет пассивной. (Хотя вероятность крайне мала, но тоже учитывайте этот фактор)

Если у вас или вашей команды также есть вышеуказанные причины, то добро пожаловать в продолжение чтения.Далее мы расскажем, как выполнить простую вторичную разработку на основе официального открытого исходного кода DrawIO.

Второе открытие DrawIO — подготовка процесса

【Уведомление】: Эта статья в основном предназначена для разработчиков интерфейса, но многие полагаются на среду Java при разработке и развертывании контента для создания новой версии процесса, поэтому для обеспечения непрерывности статья будет краткой, если вы уже знакомы с конфигурацией среды, то игнорируйте переписку с содержимым.

Подготовка окружающей среды

• Фронтенд среда разработки

Я не буду здесь много говорить.На самом деле, разработка DrawIO действительно относится к категории front-end, поэтому, если студенты, работающие с front-end, столкнутся с похожими потребностями, они должны принять вызов~

• Компиляция и сборка связанных сред — Java и Ant

Что касается установки сред Java и Ant, MacOS используется в качестве примера для объяснения, а другие системы относятся к официальному руководству.

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

# jdk 下载地址
https://www.oracle.com/java/technologies/javase-jdk16-downloads.htmlt

# ant 下载地址
https://ant.apache.org/bindownload.cgi

После загрузки установочного пакета jdk его можно установить в обычном режиме, и вы можете использовать его для проверки успешности установки.javacилиjava -versionчтобы проверить установленную версию, затем разархивируйте загруженный архив Ant в каталог Applications, а затем выполните следующую команду.

# 写入环境变量
sudo vim .bash_profile
# 这里注意，版本号和你自己下载的要对应上
export ANT_HOME=/Applications/apache-ant-1.9.16
export PATH=$ANT_HOME/bin:$PATH
# 退出并保存
:wq
# 让环境变量生效
source .bash_profile
# 查看版本
ant -V

После завершения установки вы можете проверить успешность установки в командной строке.Если соответствующая информация о версии Java и Ant, как показано на рисунке выше, появляется в командной строке, то поздравляем, что базовая среда DrawIO 2 была установлена. подготовлены, и следующим шагом является официальное открытие DrawIO 2.

Исходный код DrawIO

Начало второго открытия, первое изРепозиторий исходного кода DrawIOКлонируйте официальный код, запустите его локально, чтобы увидеть эффект. Старые правила Клонируйте и читайте первымpackage.jsonфайлы, нашел только один из нихstartЗаказ.

"scripts": {
  "start": "electron ."
}

Студенты, знакомые с внешним интерфейсом, должны знать, что эта команда запустит настольное приложение Electron.После выполнения этой команды, не случайно, перед вами появится настольная версия DrawIO.

Он используется так же, как описано в статье выше, но здесь возникает проблема! Наша конечная цель — открыть DrawIO, он основан на Electron? Хотя это не невозможно, стоимость начала работы высока, и предполагается, что большое количество студентов будет уволено.Не паникуйте, зайдите на официальный склад, чтобы узнать, есть ли другие способы.

Тяжелая работа окупается.Как показано в официальном документе выше, помимо развертывания приложений на основе Electron, DrawIO также может быть развернут на Github Pages в виде статического сайта, и адрес официального сайта становится более четким после нажатия:https://jgraph.github.io/drawio/src/main/webapp/index.html. Из ссылки видно, что сайт, развернутый Github Pages,/src/main/webappЭта папка также является корневым каталогом статических сайтов DrawIO, поэтому разработка статических сайтов слишком знакома для внешнего интерфейса, поэтому все следующие процессы с двумя открытиями объясняются на основе формы статических сайтов.

Если вашей целью является создание настольного приложения на основе Electron, вы также можете выполнить соответствующее двухкратное открытие, и процесс в основном такой же, как и двухкратное открытие статической станции. Выбор режима разработки в основном основан на анализе бизнес-требований собственной команды.Поскольку веб-приложение более универсально и не имеет так много ограничений, Cloud Music выбирает режим статической станции.

Режим разработки и предварительный просмотр

Как познакомиться с незнакомой прикладной системой или фреймворком?Самый простой способ - пошагово пройтись по входному файлу.Это очень похоже на процесс чтения исходного кода.Входной файл статической станции DrawIO/src/main/webapp/index.html, а затем начните с него и кратко расскажите, как локально разрабатывать и отлаживать код DrawIO.

• Шаг 1: Новыйpackage.json

{
  "name": "drawio-dev",
  "version": "1.0.0",
  "main": "src/main/webapp/index.html",
  "scripts": {
    "start": "cd src/main/webapp && serve"
  },
  "license": "MIT",
  "dependencies": {
    "serve": "^12.0.0"
  }
}

Сначала создайте новый корневой каталогpackage.jsonфайл, затем введите, как указано выше, затем передайтеyarn startилиnpm run startкомандой, вы можете просто запустить сервер локально для доступа к разработке, эффект будет следующим:

• Шаг 2: Измените код, просмотрите режим разработки

Поскольку файловая система проекта DrawIO очень велика, я не буду вводить здесь слишком много, а в основном представлю основной каталог файлов во втором процессе открытия.src/main/webapp/js/diagramly, файлы в этой папке являются основной частью работы системы, и большая часть работы Erkai заключается в изменении содержимого файлов этой папки.

в,src/main/webapp/js/diagramly/App.jsЭто входной js-файл для загрузки DrawIO, в первой строке которого мы набираем фрагмент кода:

Разобраться несложно, т. е. Alert — это всплывающая подсказка для проверки возможности нормального выполнения кода, но после обновления страницы вы обнаружите, что не видите этого всплывающего окна, почему так? Откройте консоль, чтобы найти причину:

найден не загруженнымapp.jsноapp.min.js, кажется, производственная версия кода загружается по умолчанию, так как же выполнить код разработки, чтобы войти в режим разработки? Внимательно прочитайте исходный код, и вы обнаружите, что DrawIO распознает URL-запрос поdevпараметры, чтобы определить, находится ли он в режиме разработки (dev === 1Это режим разработки), затем добавьте этот параметр и повторите попытку:

В этот момент в сердце автора необъяснимым образом появились десятки тысяч неведомых и милых животных, и это действительно было не так просто. Все в порядке, технология — это процесс непрерывного исследования, надеюсь, вы не сдадитесь, как я.

Конечно, прочитав эту статью, вы уже избежали 90% обходных путей, и можете переходить сразу ко второму открытию.

Почему файл не может быть найден? Простой анализ — это еще проблема указания на файл:

То, что должно быть запрошено в локальной разработке, - это локальный файл ресурсов, но панель «Сеть» обнаруживает, что запрошенный адрес ресурса неверен, не так много ерунды, если вы продолжите, вы также можете рухнуть в своем сердце. режим разработки ясно.

// index.html 从 245 行开始

// Changes paths for local development environment
if (urlParams['dev'] == '1') {
	...
  
  // ====> 开发模式文件指向本地
  if (location.hostname == 'localhost' || location.hostname == '127.0.0.1') {
    drawDevUrl = `http://${location.host}/`;
    geBasePath = `http://${location.host}/js/grapheditor`;
    mxBasePath = `http://${location.host}/mxgraph`;
    mxForceIncludes = true;
  }
  // ====> 开发模式文件指向本地
  
  mxscript(drawDevUrl + 'js/PreConfig.js');
  mxscript(drawDevUrl + 'js/diagramly/Init.js');
  mxscript(geBasePath + '/Init.js');
  mxscript(mxBasePath + '/mxClient.js');
  ...
}

Основной код и соответствующее расположение приведены выше.После модификации обновите страницу, чтобы увидеть эффект:

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

Сборка рабочей версии

Режим разработки был завершен выше, и предварительный просмотр локальной разработки в реальном времени был завершен, но окончательный выпущенный код все еще должен использовать производственную версию.Как мы знаем ранее, производственная версия использует что-то вродеapp.min.jsЭтот сжатый файл, как потом упаковать и скомпилировать локально разработанный код в производственную версию? При этом будут использоваться уже установленные ранее среды Java и Ant.

Здесь не так много контента, очень простоpackage.jsonДобавьте в файл следующий код:

{
  "name": "drawio-dev",
  "version": "1.0.0",
  "main": "src/main/webapp/index.html",
  "scripts": {
    "start": "cd src/main/webapp && serve",
+   "build": "cd etc/build && ant"
  },
  "license": "MIT",
  "dependencies": {
    "serve": "^12.0.0"
  }
}

После добавления вышеуказанногоbuildПосле запуска команды вы увидите следующее сообщение об успешной сборке:

Затем снова зайдите на домашнюю страницу, на этот раз безdev=1Посмотрите на влияние параметров разработки. Как показано на рисунке ниже, недавно разработанная производственная версия работает отлично. На данный момент процесс второго открытия DrawIO был представлен от предварительного просмотра разработки до производственной версии компонента.

развертывать

Для развертывания вы можете обратиться к развертыванию статического сайта, основной каталог — это тот, который упоминался выше.src/main/webapp. Автор просто предлагает вам несколько идей по развертыванию:

• Страницы Github (личные)
• Версель (личный)
• Nginx (команда)
• Сервер узла (команда)

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

DrawIO Two Open — Технические детали

Система управления чертежами, разработанная автором на основе DrawIO, находится на внутреннем тестировании команды облачной музыки.В настоящее время завершены и находятся в разработке следующие наборы функций:

• Основная функция рисования
• Добавляйте, удаляйте, изменяйте и проверяйте на основе внутренних сервисов облачной музыки.
• Модуль персонального центра, управляйте собственным содержимым диаграммы
• Взаимодействие с данными, взаимодействие данных между диаграммами и бизнес-системами, а также импорт созданных диаграмм одним щелчком мыши.
• Todo - функции аутентификации, такие как совместное использование, те, кто указывает разрешения, могут выполнять соответствующие операции
• Todo — командное пространство, где команда может управлять коллекцией диаграмм.
• Todo — история версий, поддержка просмотра самых последних версий версий
• Todo — Пользовательский импорт некоторых часто используемых шаблонов на основе компании/человека.

Поскольку эта статья по-прежнему носит технический характер, многие из вышеперечисленных функций не имеют ничего общего с DrawIO II. Все они основаны на потребностях бизнеса, поэтому я не буду вдаваться в подробности. Автор считает, что все разработчики/команды реализовать DrawIO II. Основная причина открытия, более 80%, заключается в том, что вы хотите сохранить содержимое во внутреннюю службу, то есть получить текущую чертежную доску и сохранить ее в базе данных в соответствии с определенной формой, это является основной частью всего процесса второго открытия. Вот пример исходного кода в процессе двух открытий, чтобы раскрыть некоторые технические детали процесса двух открытий DrawIO.

Получить текущее содержимое монтажной области --getCurrentFile

Итак, как получить текущее содержимое артборда? или черезApp.jsЧитая исходный код, я нашел следующий код:

App.prototype.save = function(name, done) {
	var file = this.getCurrentFile();
  ...
}

Как следует из названия, этот код будет выполняться при сохранении и получит объект файла файл, добавит журнал и запустит код, чтобы увидеть эффект:

Видно, что объект файл файл действительно печатается Многие атрибуты в объекте здесь не объясняются, но вводится только один из самых основных.dataАтрибуты также являются данными файла, что мы можем сделать с этими данными файла? Не волнуйся, просто посмотри вниз.

Загрузите файл конструкции на локальный

пройти черезgetCurrentFileМы получаем с холста, который в данный момент рисуется, данные диаграммы. Видя, что содержимое представляет собой строку XML. Далее вы сможете загрузить файл через эту строку, чтобы увидеть, точно ли диаграмма на холсте такая же. ЗдесьfilesaverЗагрузите данные структурированного файла, основной код выглядит следующим образом:

/**
 * 构造文件下载到浏览器
 **/
function download() {
  const fileObj = {
    title: 'luffyzh.drawio',
    data: '<mxfile host="localhost" modified="2021-09-02T09:50:39.574Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36" etag="PyBU88KGLdBE5FU7fpPf" version="@DRAWIO-VERSION@" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNfE7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTeVcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgUFMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTyeg2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnktvi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxtzQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBADL1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=</diagram></mxfile>'
  }
  const blob = new Blob([fileObj.data], {type: 'application/octet-stream'});
  saveAs(blob, fileObj.title);
}

Из кода и эффекта скриншота можно сделать вывод: черезgetCurrentFileПолучив основные данные диаграммы, вы можете легко создать обратно файл .drawio, который является файлом чертежа, и он точно такой же, как файл на холсте (конечно, я чувствую, что говорю чепуху, это точно так же, данные те же.странно разные).

Нарисуйте сохраненные данные диаграммы на холсте -loadFile

На двух предыдущих шагах мы определили получение данных холста и возможность обратного построения данных в файл диаграммы, тем самым подтвердив осуществимость технического решения, но на самом деле остается еще одна последняя ссылка — загрузка данных диаграммы. на холст, потому что вы Диаграмму можно не только сохранить, но и иметь возможность продолжать редактировать.Поэтому данные получаются из файла, а затем обратно строятся в данные диаграммы и загружаются на холст, что завершает минимальный замкнутый цикл DrawIO с двумя отверстиями. Без лишних слов, основной API —loadFile, подробный код выглядит следующим образом:

if (this.editor.isChromelessView()) {
	...
}
/**
 * 如果有id，表示打开了一个存在的文档，进入编辑模式
 */
else if (urlParams['id']) {
  const mockFile = {
    title: 'luffyzh.drawio',
    data: '<mxfile host="localhost" modified="2021-09-02T09:50:39.574Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36" etag="PyBU88KGLdBE5FU7fpPf" version="@DRAWIO-VERSION@" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNfE7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTeVcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgUFMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTyeg2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnktvi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxtzQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBADL1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=</diagram></mxfile>'
  }
  const file = new LocalFile(this, mockFile.data, mockFile.title, this.mode);
  this.loadFile(`-1`, true, file);
}
else if (!mxClient.IS_CHROMEAPP && (this.mode == null || force)) {
  ...
}

Когда приведенный выше код входит на страницу, он определяет, содержит ли ссылка параметрыid, если он перенесен, он создаст простой объект данных файла DrawIO, а затем передастloadFileЭтот метод рисует файл на холсте, и конкретный эффект показан на следующем рисунке:

Основываясь на этом случае, мы можем в основном объяснить основные технические детали всего двухотверстия DrawIO, и весь процесс двухотверстия также может быть четко связан последовательно Я полагаю, что у вас уже есть свой собственный грандиозный план в уме, тогда вы сможете воплотить свои идеи в жизнь.

Если вы действительно хотите посетить и испытать эффект, автор просто развернул личную версию DrawIO, доступ к которой вы можете получить по следующей ссылке:

• Персональная версия DrawIO
• Загрузка файла DrawIO
• Файл загрузки DrawIO loadFile

DrawIO Two Open — базовая архитектура

Я рассказал о многих процессах разработки и подробностях нахождения в ямах.В дополнение к тому, что я помог вам наступить на ямы, автор также сделал некоторые выводы о недавнем опыте двухоткрытия DrawIO и спроектировал двухъярусное DrawIO. Открытие архитектуры разработки Ниже приводится краткое введение Процесс проектирования этой архитектуры.

На самом деле, DrawIO Second Open — это скорее разработка замкнутой системы с функциями рисования в качестве ядра, поэтому, помимо основных функций рисования, наиболее важной частью является умелая интеграция функций рисования DrawIO в систему. это я резюмировал три архитектурных шаблона:

Архитектура 1 — режим одной статической станции

Режим одной статической станцииОбщая архитектура показана на рисунке выше Вся архитектура основана на каталоге статического сайта DrawIO.src/main/webappЭто корневой каталог, и он разработан в соответствии с самым примитивным режимом разработки статической станции. где находится входной файлindex.html, загрузите основные зависимости, связанные с рисованиемjsфайл, завершить функцию рисования, другие страницы функций и страницы рисования не имеют логики связи, вы можете создать несколько новых в каталоге проектаhtmlфайл, аhtmlФайл соответствует функции для выполнения итерации разработки проекта. Например, домашняя страницаhome.html + home.js, страница со спискомlist.html + list.jsПодождите, вся разработка возвращается в самый примитивный режим фронтенд-разработки —HTML + JavaScript + CSS.

преимущество:Логика проста и понятна, основана на каталоге репозитория исходного кода DrawIO для постепенной разработки, проста в использовании.

недостаток:Первоначальный режим разработки неэффективен, в собственном режиме разработки не используются популярные фреймворки и инструменты упаковки, что не соответствует современному режиму разработки.

Архитектура 2 — двухсистемный режим

На основе анализа первого режима статической архитектуры сайта видно, что этот режим не очень соответствует текущему ритму фронтенд-разработки, а исходный метод неэффективен системный режим. В этом режиме есть две системы: система рисования DrawIO и родственная бизнес-система.Фактически, во всей системе основная функция рисования и другие бизнес-требования могут быть полностью разделены, поэтому бизнес, не связанный с рисованием, может быть извлечен. формируется в одиночку, и эта система может быть разработана с использованием современной модели разработки, и нет никаких ограничений на выбор архитектуры систем-братьев, и вы можете использовать то, что хотите разработать.

преимущество:Двойные системы не зависят друг от друга и не влияют друг на друга.Бизнес-системы Brother также могут использовать новейшие платформы и технологии для повышения эффективности.

недостаток:Для итераций разработки необходимо поддерживать две системы, а два доменных имени и две среды увеличивают затраты на обслуживание.

Архитектура 3 — специальный режим одиночной системы

Из анализа двух вышеупомянутых архитектур видно, что архитектура 1 увеличивает сложность разработки из-за исходного режима разработки, а архитектура 2 повышает эффективность разработки за счет разъединения для формирования двойной системы, но вводит дополнительные затраты на сохранение дуальной системы, что приводит к увеличению сложности управления. Таким образом, преимущества и недостатки двух архитектур объединяются, и, наконец, формируется третья архитектура -Специальный односистемный режим. Эта архитектура сочетает в себе преимущества двух вышеуказанных архитектур и повышает эффективность разработки за счет некоторых специальных решений.Схема архитектуры представлена ​​на следующем рисунке:

Далее основное внимание уделяется объяснению того, как эта особая односистемная архитектура решает проблемы сложности разработки и управления, упомянутые выше.

Решить сложность разработки на самом деле очень просто.Достаточно внедрить подходящий современный фреймворк.Здесь я представляю Next.js.Зачем внедрять Next.js вместо других современных фреймворков? Для этого есть три причины:

• Во-первых, это SSR-фреймворк, основанный на React.js, поэтому он соответствует требованиям современных фреймворков для повышения эффективности разработки.
• Во-вторых, Next.js имеет множество функций, которые могут помочь решить проблемы управления, которые будут обсуждаться позже.
• Наконец, я лично люблю Next.js, это причина самой полной.

Ниже представлено ядро ​​всей архитектурыpackage.jsonЧасть кода в файле на самом деле не имеет большого количества сложных операций, она предназначена для того, чтобы помочь разработчикам соединить систему рисования и бизнес-систему с помощью нескольких команд, чтобы сформировать систему, которая снаружи выглядит относительно унифицированной, потому что она специальный заказ на основе современной системы моста режима, поэтому разработка и развертывание очень просты.

{
  "name": "overmind-x-graph",
  "version": "0.1.0",
  "author": "luffyZh <zhoudeyou@126.com>",
  "keywords": ["drawio", "react", "next.js"],
  "scripts": {
    "start": "next dev",
    "build": "next build",
    "prod": "next start",
    "drawio-dev": "cd drawio-project/src/main/webapp && serve",
    "drawio-build": "source ~/.bash_profile && cd drawio-project/etc/build && ant",
    "gen-drawio": "rm -rf public/drawio && cp -r drawio-project/src/main/webapp public/drawio",
    "analyze": "ANALYZE=true next build",
    ...
  },
  ...
}

Описание команды скрипта

• yarn drawio-dev—— Отладка системы рисования DrawIO в режиме разработки

Эта команда предназначена для того, чтобы помочь разработчикам войти в режим разработки системы рисования.Хотя две системы связаны друг с другом, рекомендуется рассматривать систему рисования как независимую систему во время разработки и изменять рисунок, участвующий в процессе открытия второго DrawIO: Весь исходный код выполняется в системе рисования, поэтому режим разработки системы рисования DrawIO очень важен.

• yarn drawio-build- Скомпилируйте систему DrawIO

Когда второе открытие DrawIO завершено или поэтапное тестовое развертывание завершено, файлы, измененные в среде разработки, необходимо встроить в версию рабочей среды.В это время эту команду можно использовать для завершения строительных работ. .

• yarn gen-drawio—— Синхронизировать последнюю систему рисования с основной системой

Как соединить систему рисования и бизнес-систему? Это реализуется этой командой.Система рисования разрабатывается и компилируется как отдельная подсистема.После завершения компиляции необходимо только выполнить эту команду, чтобы привести основные файлы системы рисования, необходимые основной системе.

• next.config.js- Основной файл конфигурации системы, подсистема моста

const fs = require('fs');
const path = require('path');

...

module.exports = {
  reactStrictMode: true,
  // 重写 DrawIO 静态站地址，桥接主子系统
  rewrites: async () => drawioPaths,
};

Так как же основная система завершает мост между системой рисования и бизнес-системой? Ответ через Next.jsRewritesЕсли вам интересно, вы можете проверить официальную документацию, именно благодаря этой функции можно открыть DrawIO на одной системе, и это очень удобно для разработки.Объединение двойной системы позволяет всему проекту сформировать независимую законченную систему снаружи.Это ядро ​​этой архитектуры.

Еще одна вещь, чтобы сказать здесь, вы можете ничего не почувствовать на первый взгляд, но доработка этой архитектуры действительно доработана автором после непрерывных попыток разработки.Если вам интересно, вы можете запустить код, чтобы испытать его. Кроме того, выберите фреймворк, который вам подходит. Это не обязательно должен быть Next.js. Если вы разработчик на основе Vue, ждет ли вас там Nuxt? В этой статье представлена ​​только идея, вы можете расходиться в своих идеях, все-таки процесс изучения самостоятельно более интересен.

Сказав так много, это на самом деле помогло вам подготовить судей, основываясь наАрхитектура трипостроил эшафотsimple-drawio-starter, вы можете напрямую использовать его для разработки бизнес-логики.

Суммировать

В то время как DrawIO имеет мощные функции, файловая структура всего исходного кода также очень большая и сложная, поэтому чтение требует много усилий.От установления требований до чтения исходного кода до окончательной сводной структуры с двумя открытыми я случайно написал текст длиной 10 000 символов. Надеюсь, что эта статья сможет помочь тем, кто имеет схожие потребности или хочет создать аналогичный инструмент. На самом деле, сложность разработки DrawIO заключается в том, что существует относительно мало связанных технических документов. сообщество использует туториалы вместо вторично открытых туториалов, которые трудно найти.Хороший вводный документ по разработке — это первоначальное намерение автора написать эту статью, и я также надеюсь, что каждый сможет пойти в обход.

Наконец, большое спасибо за то, что терпеливо прочитали эту статью.Если у вас есть лучшие идеи и идеи в процессе разработки DrawIO, пожалуйста, оставьте сообщение и обменяйтесь, я был бы очень благодарен~

Эта статья была опубликована сКоманда внешнего интерфейса NetEase Cloud Music, Любое несанкционированное воспроизведение статьи запрещено. Мы набираем front-end, iOS и Android круглый год.Если вы готовы сменить работу и любите облачную музыку, присоединяйтесь к нам на grp.music-fe(at)corp.netease.com!