Nodejs 求助:如何在 leanote desktop app 中正确的导入 mermaid.js

发布于 1周前 作者 itying888 来自 nodejs/Nestjs

Nodejs 求助:如何在 leanote desktop app 中正确的导入 mermaid.js

想给 leanote desktop-app 添加 mermaid 的支持,研究了一下代码,主要修改 main-v2.js ,但是在引入 https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.1.2/mermaid.js 包的时候,总是出错,找了几个小时,也没有好办法,特此前来请教一下。mermaid.js 是用 webpack 打包后的文件。

目前发现还是包导入的姿势不对,新手请求各位指点一二!跪谢!

require 导入包的配置:

requirejs.config({
    waitSeconds: 0,
    packages: [
    ],
    paths: {
       ...
       'mermaid': 'public/libs/uml/mermaid'
    },

以下是新增的代码:

        function renderMermaid() {
                var mer = previewContentsElt.querySelectorAll('.prettyprint > .language-mermaid');
                if (!mer || mer.length == 0) {
                        return;
                }
                console.log(mer);
                require(['mermaid'], function (mermaid) {
                        console.log('xxx');
                        _.each(mer, function(elt) {
                                try {
                                        /*
                                        var chart = flowChart.parse(elt.textContent);
                                        var preElt = elt.parentNode;
                                        var containerElt = crel('div', {
                                                class: 'flow-chart'
                                        });
                                        preElt.parentNode.replaceChild(containerElt, preElt);
                                        chart.drawSVG(containerElt, JSON.parse(umlDiagrams.config.flowchartOptions));
                                        */
                                        console.log(elt)
                                }
                                catch(e) {
                                        console.error(e);
                                }
                        });
                });
        }

我自己验证了一下,写了个 math.js ,是可以引入并正确使用的

define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});

PS, 为啥 desktop-app 的 main-v2.js 包含了很多其他的库,例如 underscore.js 、pretty 等等?感觉导入的包很混乱,整个文件有些大,编辑起来很吃力。


7 回复

导入后,主要错误是:

<br>mermaid.js:50700 Uncaught TypeError: _.constant is not a function<br> at Object.&lt;anonymous&gt; (mermaid.js:50700)<br> at __webpack_require__ (mermaid.js:30)<br> at Object.&lt;anonymous&gt; (mermaid.js:60183)<br> at __webpack_require__ (mermaid.js:30)<br> at Object.&lt;anonymous&gt; (mermaid.js:22998)<br> at __webpack_require__ (mermaid.js:30)<br> at webpackUniversalModuleDefinition (mermaid.js:32880)<br> at Object.&lt;anonymous&gt; (mermaid.js:32887)<br> at __webpack_require__ (mermaid.js:30)<br> at webpackUniversalModuleDefinition (mermaid.js:58497)<br>


这个错误 明显是没有引用 underscore 导致的啊
define(‘compA’, [‘underscore’, ‘mermaid’], function(_, M) {
// _. constant
// M
})

mermaid.js 里面,有 webpack 打包的 lodash,constant 是 lodash 里定义的函数,我猜测是和外部的 underscore 包冲突了

resolve: {
alias: {
_: “underscore/dist/underscore.min”
}
}

<br>new webpack.ProvidePlugin({<br> 'window.jQuery': 'jquery',<br> 'window.$': 'jquery',<br>})<br><br>var $ = require('jquery');<br>window.jQuery = $;<br>window.$ = $;<br>

非常感谢你的回复,我没有用过 webpack,我搞后端的,只是想扩展一下 leanote 的功能,还请多指教!
能否参考 https://github.com/knsv/mermaid,中的 webpack 配置,看看怎么修改可以去除这种问题。

在 Leanote Desktop App 中导入 Mermaid.js 以支持图表和流程图渲染,你可以通过以下步骤来实现。这通常涉及到修改 Leanote 的配置文件或直接在笔记中使用 Mermaid 的语法。以下是一个基本的指导:

  1. 确保 Leanote 支持 Markdown: Leanote 是基于 Markdown 的,所以首先确保你的 Leanote 版本支持 Markdown 渲染。

  2. 在笔记中直接使用 Mermaid 语法: 你可以在笔记的 Markdown 编辑器中直接插入 Mermaid 的代码块。例如:

    ```mermaid
    graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    
    
    
  3. 配置 Leanote 以支持 Mermaid: Leanote 默认可能不支持 Mermaid,所以你需要确保你的前端渲染引擎(可能是基于 Markdown-it 或其他)支持 Mermaid 插件。如果 Leanote 提供了插件机制,你可以查找是否有现成的 Mermaid 插件。如果没有,你可能需要手动集成。

  4. 手动集成 Mermaid.js: 如果 Leanote 没有提供直接的 Mermaid 支持,你可以尝试修改 Leanote 的前端代码。这通常涉及到下载 Mermaid.js 库并在 Leanote 的前端渲染过程中引入它。例如,在 Leanote 的 HTML 模板或 JavaScript 文件中添加以下代码:

    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.5.2/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true });
    </script>
    

    注意:具体实现可能因 Leanote 的版本和架构而异。

回到顶部