Как установить русалку для отображения потоковых диаграмм в уценке? - PullRequest
Новая
       81

Как установить русалку для отображения потоковых диаграмм в уценке?

0 голосов
/ 08 июня 2018

Я пытаюсь отобразить потоковую диаграмму в файле уценки с помощью русалки.У меня есть файл ReadMe.md в моем репозитории GitHub, и я хотел бы включить базовую блок-схему, чтобы помочь описать содержимое.Но я не могу понять, как заставить это работать.Кто-нибудь сможет опубликовать более конкретные инструкции о том, как сделать простой пример?

В этой ссылке (https://unpkg.com/mermaid@8.0.0-rc.8/README.md), приведен пример кода для установки русалки: 

    ```
    https://unpkg.com/mermaid@7.1.0/dist/
    ```

Я включил этот код, затем попытался создать потоковую диаграмму в следующем фрагменте кода: 

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

Но все, что он делает, это печатает этот текст в файле уценки при его предварительном просмотре.

Кажется, что это возможно на основе Mermaid ReadMe: https://github.com/knsv/mermaid/blob/master/README.md. Но когда я смотрю на код, это на самом деле картина потоковой диаграммы, а не рендеринг кода. Так что, возможно, то, что я спрашиваю, не 'Т возможно?

Буду признателен за любую помощь!

Ответы [ 3 ]

0 голосов
/ 26 апреля 2019

Я создал расширение Firefox & Chrome, которое не было доступно во время первого ответа: Github + Mermaid

Чтобы использовать его, вам нужно указать mermaid какязык: 

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

Работает на:

  • PR и выпускает
  • Комментарии
  • Суть

(как при предварительном просмотре, так и при сохранении)

PS: Я не уверен, правильно ли рекламировать здесь свою работу, но я чувствую, что она отвечает на вопросы.

0 голосов
/ 09 мая 2019

Вы можете использовать mermaid-cli https://github.com/mermaidjs/mermaid.cli для создания диаграмм.Вы можете создавать файлы .svg, .png или .pdf по своему усмотрению.

Выполните следующую команду после установки mermaid-cli 

mmdc -i input.mmd -o output.png

здесь input.mmd - это файл русалки, который содержит 

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

в вашем случае.

0 голосов
/ 28 августа 2018

К сожалению, уценка с использованием github не поддерживает рендеринг графиков русалок.См. эту проблему для получения дополнительной информации и поиска комфорта в поиске этой функции другими людьми;)

Если вы используете VS Code, вы можете использовать это расширение для предварительного просмотраВаш код русалки блокируется внутри уценки, но учтите, что он не рендерится, как только вы поместите его на github.Чтобы включить диаграмму в github, вам нужно будет отобразить ее в файл, хотя кто-то предложил каким-либо образом использовать онлайн-редактор русалок для ее визуализации и получения URL-адреса отображаемой версии.

На самом делеПозвольте мне попытаться вставить пример диаграммы по ссылке на ранее упомянутой странице ... и, нет.Мы получаем Failed to upload image; the format is not supported -ошибку.

Так что вам нужно сначала сохранить его как изображение.

...