js2flowchart

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

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

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

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

Что делает js2flowchart?

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

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

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

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

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

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

/**
* Доступ к API, когда js2flowchart вводится в HTML-страницу
*/
const {convertCodeToFlowTree, convertFlowTreeToSvg} = window.js2flowchart;

/**
* или импорт из node_modules
*/ 
import {convertCodeToFlowTree, convertFlowTreeToSvg} from 'js2flowchart';//way 1
import * as js2flowchart from 'js2flowchart';//way 2

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

const code = `function indexSearch(list, element) {
    let currentIndex,
        currentElement,
        minIndex = 0,
        maxIndex = list.length - 1;

    while (minIndex <= maxIndex) {
        currentIndex = Math.floor(minIndex + maxIndex) / 2;
        currentElement = list[currentIndex];

        if (currentElement === element) {
            return currentIndex;
        }

        if (currentElement < element) {
            minIndex = currentIndex + 1;
        }

        if (currentElement > element) {
            maxIndex = currentIndex - 1;
        }
    }

    return -1;
}`;

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

const svg = js2flowchart.convertCodeToSvg(code);

приме работы

2548 просмотров