js2flowchart

js2flowchart.js — плагин для визуализации JS-кода

Иногда очень важно представлять структуру своего кода и держать под контролем целые блоки. Библиотека js2flowchart.js призвана улучшить восприятия для программиста.

Описание плагина

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

Что делает js2flowchart?

js2flowchart принимает код JS и возвращает SVG блок-схему, работает на клиенте / сервере, поддержка ES6.

Основные особенности:

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

Вариант использования:

  • объяснять/документировать код блок-схемы
  • изучение кода другого пользователя с помощью визуального понимания
  • создайте блок-схемы для любого процесса, просто описанного допустимым синтаксисом JS

Примеры использования

По-умолчанию. Вот функция кода для классического случая Бинарного поиска:

Преобразуем его в SVG (самый простой способ):

приме работы