13.03.2019 10:04
javascript 23 3700 Источник
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
    13.03.2019 13:26
    #19876792
    +1

    Увы, упало 


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

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


    1. JustDont
      13.03.2019 13:40
      #19876866

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


      1. javascript Автор
        13.03.2019 13:49
        #19876932

        Я также тестировал на ReactDOM:

        image


    1. javascript Автор
      13.03.2019 13:49
      #19876928

      Уффф, интересно. А можно посмотреть лог, если запустить LEVEL=trace npx arkit?


      1. VolCh
        13.03.2019 17:37
        #19878738

        перестало вылетать с https://habr.com/en/post/443560/#comment_19878226, но теперь пишет componentsByName[component.name].push is not a function


    1. javascript Автор
      13.03.2019 13:52
      #19876960

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


  1. frostspb
    13.03.2019 14:00
    #19877028

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


    1. javascript Автор
      13.03.2019 14:24
      #19877202

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


      1. frostspb
        13.03.2019 17:00
        #19878510

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


        1. javascript Автор
          13.03.2019 17:14
          #19878608

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


          1. frostspb
            13.03.2019 17:40
            #19878754

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


            1. javascript Автор
              13.03.2019 18:03
              #19878882

              Записал поддержку webpack resolve alias в roadmap. Спасибо!


              1. frostspb
                13.03.2019 21:12
                #19879718

                С меня звёздочка на гитхабе =)


                1. javascript Автор
                  13.03.2019 23:13
                  #19880162

                  По рукам! :-)


                  1. javascript Автор
                    15.03.2019 16:15
                    #19890236

                    Заработало в 1.4.0


                1. javascript Автор
                  15.03.2019 16:15
                  #19890242

                  Заработало в 1.4.0


  1. RouR
    13.03.2019 14:05
    #19877064

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

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


    1. javascript Автор
      13.03.2019 14:25
      #19877216

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


  1. zhka
    13.03.2019 15:44
    #19877856

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

    <pre>Payload Too Large</pre>

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


    1. javascript Автор
      13.03.2019 15:50
      #19877916

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


      1. zhka
        13.03.2019 16:25
        #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


        1. javascript Автор
          13.03.2019 16:27
          #19878236

          Это в версии arkit@1.3.14?


          1. zhka
            13.03.2019 16:33
            #19878282

            Да