Помечено (Уценка) + Русалка (Блок-схема и диаграммы)

Question

Помечено (Уценка) + Русалка (Блок-схема и диаграммы)

Борьба за то, чтобы Русалка - 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

javascript markdown flowchart mermaid javascript-marked

Источник

user3994515 20 фев '15 в 10:08

3 ответа

Другие вопросы по тегам javascript markdown flowchart mermaid javascript-marked

user4594661 22 фев '15 в 20:37 2015-02-22 20:37 · Answer 1 · 2015-02-22 20:37

Я проверил ваш код, чтобы получить файл console.log с записью русалки.

Нет ничего плохого в том, что вы заметили, и нет ничего плохого в вашем рендерере. Однако... уценка в журнале консоли не была в порядке.

Добавляя новые строки до и после определения графика, вышедший div был выведен на консоль.:

\ ngraph TD; A ->B;A->C;B->D;C->D;\n

Надеюсь, это поможет.

/ Кнут

user2070364 28 фев '16 в 13:14 2016-02-28 13:14 · Answer 2 · 2016-02-28 13:14

У меня тоже была эта проблема. Попробуйте этот формат строки, он работал для меня:

'граф TB\n'+'A -> B\n'+'A -> C\n'+'B -> D\n'+'C -> D \ n'

0

Источник

user2070364 28 фев '16 в 13:14

user1562596 19 фев '21 в 01:34 2021-02-19 01:34 · Answer 3 · 2021-02-19 01:34

На мой взгляд, диаграммы русалки отлично отображаются в Marked2 (версия: 2.6.4).

Пример источника уценки:

      <script src="https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js"></script>
```mermaid
graph TD;A-->B;A-->C;B-->D;C-->D;

```

Предостережение: похоже, что Mermaid нужно вызывать дважды после каждого редактирования. Итак, после редактирования, когда Marked2 обновил предварительный просмотр потоковой передачи, мне нужно нажать «Обновить».

Отмечено 2 настройки:

"Создание типографически правильных кавычек и знаков препинания" не отмечено
Подсветка синтаксиса: не отмечено
Процессор: MultiMarkdown или Discount

Похожие сообщения на форуме Marked2: