4

Mermaid を取得するのに苦労しています - https://github.com/knsv/mermaid を Marked と連携させる - https://github.com/chjj/marked

私が集めたものから、マークダウンで次のように書くことができるはずです

```
  graph TD;A-->B;A-->C;B-->D;C-->D;
```

レンダリングする

<div class="mermaid">
   FLOWCHART / DIAGRAM IS DRAWN HERE
</div>

私は何が欠けていますか？

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script src="libs/jquery.min.js"></script>
      <script src="libs/marked.min.js"></script>
      <script src="libs/mermaid.full.js"></script>
    </head>
    <body>

    <div id="content"></div>

    <script>

      var renderer = new marked.Renderer();
      renderer.code = function (code, language) {
        if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
           return '<div class="mermaid">'+code+'</div>';
        }
      };

        $(document).ready(function(){

        $.get( "test.md", function( data ) {
          // console.log(data);
          $('#content').html(marked(data));
        });

      });

    console.log(marked('```graph TD;A-->B;A-->C;B-->D;C-->D;```', { renderer: renderer }));

    </script>
    </body>
    </html>
4

3 に答える 3

2

人魚のdivを書いているconsole.logを取得するまで、コードをテストしました。

マークされたインスタンス化に問題はなく、レンダラーにも問題はありません。ただし...コンソールログのマークダウンは問題ありませんでした。

グラフ定義の前後に新しい行を追加することで、予想される div がコンソールに出力されました。

\nグラフ TD;A-->B;A-->C;B-->D;C-->D;\n

これが役立つことを願っています。

/クヌート

于 2015-02-22T20:37:27.567 に答える