arkit — архитектурные диаграммы для JavaScript, TypeScript и Flow +20



arkit (швед. arkitektur)

Дамы и господа, представляю вашему вниманию arkit — инструмент, который анализирует файлы вашего проекта и генерирует диаграмму зависимостей между ними и внешними модулями. Наверное, проще показать на примере самого arkit:

архитектурная диаграмма

Таким образом, по каждому коммиту, эта SVG-диаграмма обновляется и позволяет всегда видеть актуальную общую картину. Обзор возможностей на данный момент:

  • Ассоциирует файлы проекта с указанными компонентами архитектуры;
  • Группирует проекты и отображает зависимости между ними;
  • Поддерживает JavaScript, TypeScript, Flow, а также node-модули;
  • Экспортирует визуализацию архитектуры как SVG, PNG или Plant UML диаграмму;
  • Интегрируется в процесс разработки, поэтому вашм CI, VCS, README и PR довольны.

Попробуйте его простой командой npx arkit -o arkit.svg в папке проекта и расскажите как вам результат. Также мне интересно была ли необходимость в таком решении и какие альтернативы вы пробовали.

Вы можете помочь и перевести немного средств на развитие сайта



Комментарии (23):

  1. VolCh
    /#19876792 / +1

    Увы, упало


    FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

    Циклические зависимости должно разруливать?

    • JustDont
      /#19876866

      У меня на мою мешанину импортов с легкостью петли нарисовало. У меня правда очень мелкий код пока что.

    • javascript
      /#19876960

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

  2. frostspb
    /#19877028

    с проектом на nuxt.js она отрисовала серверные зависимости норм, а вот уже всё остальное не очень. Всё что в папке pages она не смогла слинковать

    • javascript
      /#19877202

      А можно посмотреть пару исходников? Точнее как устроены импорты.

      • frostspb
        /#19878510

        import furyBasePage from '~/components/base/page.vue'
        import furyActionButton from '~/components/base/actionButton.vue'
        В ~/components/base/page.vue используются компоненты vuetify подключенные в nuxt VuetifyLoader'ом

        • javascript
          /#19878608

          Видимо он не распознаёт тильду.
          А где прописано куда она ведёт? В webpack.config?

          • frostspb
            /#19878754

            webpack config инкапсулирован в недрах nuxt.js
            Причем. пути еще могут и без / выглядеть. Типа так ~assets/style/variables.styl

  3. RouR
    /#19877064

    какие альтернативы вы пробовали

    Я написал либу для C#. Экспорт в Graphviz.
    Но была немного другая задача, получить архитектурную диаграмму микросервисов, кто куда какие DTO отправляет.
    Поскольку Graphviz сам рисует и выбирает где какой блок разместить, то получилось не красиво, и не наглядно.

    • javascript
      /#19877216

      arkit использует PlantUML, который в свою очередь dot и старый добрый Graphviz :-)

  4. zhka
    /#19877856

    После запуска выводит HTML с телом:

    <pre>Payload Too Large</pre>
    

    Что я делаю не так?

    • javascript
      /#19877916

      Всё так, это express экономит. Попробуйте, пожалуйста, ещё раз.

      • zhka
        /#19878226

        Запустил с LEVEL=trace… а там
        FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed — JavaScript heap out of memory
        Отправил трейс в личку.

        Попробовал указать при запуске
        NODE_OPTIONS='--max_old_space_size=4096'
        при этом просто вылетает с сообщением
        Invalid string length