js2flowchart 是一个可将任何JavaScript代码转换为漂亮的SVG流程图的插件-BFW插件库

js2flowchart 是一个可将任何JavaScript代码转换为漂亮的SVG流程图的插件

js2flowchart 是一个可将任何JavaScript代码转换为漂亮的SVG流程图的插件。

主要特点：

定义的抽象级别 仅渲染导入/导出，类/函数名称，函数依赖关系以逐步学习/解释代码。
自定义抽象级别支持 创建您自己的一个
表示生成器 以生成SVG列表，以实现不同的抽象级别
定义了流树修饰符，以将众所周知的API（例如[] .map，[]。forEach，[]。filter）映射到方案上的Loop结构。
破坏修饰符，以方案中的一种形状替换代码块
自定义流树修饰符支持 创建自己的一个
流树忽略过滤器 以完全省略一些代码节点，即日志行
聚焦节点或整个代码逻辑分支 以突出显示方案的重要部分
模糊节点或整个代码逻辑分支 以隐藏不重要的内容
定义的样式主题支持 选择您喜欢的一种
自定义主题支持 创建您自己的主题，使其更适合您的上下文颜色
自定义颜色和样式支持 提供了方便的API，无需更改样板即可更改特定样式

使用方式：

第一步引入bfwone

第二步use插件

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["js2flowchart"], function() {
                const  svg = js2flowchart.convertCodeToSvg($("#codeEditor").val());
                $("#svgImage").html(svg);

            });
        });
    </script>
    <style>

        .container {
            display: flex;
            flex-direction: row;
        }

        .column {
            flex: 1;
            border-left: 1px solid #ccc;
        }

        #codeEditor {
            height: 100vh;
            width: 50vw;
        }
        #svgImage {
            background: white;
            margin: 0;
            overflow: auto;
        }

        #downloadFile {
            position: fixed;
            right: 20px;
            top: 15px;
            padding: 5px 10px;
            background: white;
            border: 1px solid #2288ff;
            outline: none;
            font-weight: bold;
            color: #2288ff;
            font-family: sans-serif;
            cursor: pointer;
            z-index: 10;
        }
        #downloadFile:hover {
            background: #d8efff;
        }

        .CodeMirror {
            height: 100%;
            line-height: 1.5;
        }

        .container {
            
        }


    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <textarea id="codeEditor">
                /**
                * Binary search
                * @param {Array} list
                * @param {Number} element
                * @returns {number}
                */
                function indexSearch(list, element) {
                let currentIndex,
                currentElement,
                minIndex = 0,
                maxIndex = list.length - 1;

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

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

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

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

                        return -1;
                        }
               </textarea>
                </div>
                <button id="downloadFile">DOWNLOAD SVG FILE</button>
                <div class="column">
                    <p id="svgImage"></p>
                </div>
            </div>
        </body>
    </html>

github地址https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart