web-dev-qa-db-ja.com

マークダウンでフローチャートをレンダリングするために人魚をインストールする方法は？

Mermaidを使用して、マークダウンファイルでフローチャートをレンダリングしようとしています。 GitHubリポジトリにReadMe.mdファイルがあり、内容を説明するのに役立つ基本的なフローチャートを含めたいのですが。しかし、それを機能させる方法がわかりません。誰かが簡単な例をレンダリングする方法に関するいくつかのより具体的な指示を投稿できますか？

このリンク（ https://unpkg.com/[email protected]/README.md ）には、Mermaidインストールのサンプルコードスニペットがあります。

    ```
    https://unpkg.com/[email protected]/dist/
    ```

そのコードを含めて、次のコードスニペットでフローチャートを作成しようとしました。

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

しかし、プレビューするときにマークダウンファイルにそのテキストを印刷するだけです。

Mermaid ReadMe： https://github.com/knsv/mermaid/blob/master/README.md に基づいて可能であるようです。しかし、コードを見ると、実際にはフローチャートの画像であり、コードのレンダリングではありません。だから多分私が求めていることは不可能ですか？

どんな助けにも感謝します！

githubmarkdownreadmemermaid
7
AlexP

残念ながら、github風味のマークダウンは人魚グラフのレンダリングをサポートしていません。詳細については この問題 を参照し、この機能を求める他の人々の快適さを探してください;）

VS Codeを使用している場合は、 この拡張子 を使用してマークダウン内のマーメイドコードブロックをプレビューできますが、githubに配置するとレンダリングされないことに注意してください。 githubにグラフを含めるには、ファイルにレンダリングする必要がありますが、誰かが オンラインマーメイドエディター を使用してそれをレンダリングし、レンダリングされたバージョンのURLを取得することを提案しました。

実際、前に述べたページのリンクから例のグラフを挿入してみましょう...そして、いいえ。 Failed to upload image; the format is not supported-エラー。

したがって、最初に画像として保存する必要があります。

6
Jannik Buhr

私はFirefoxを作成しました＆Chrome最初の回答の時点では利用できなかった拡張機能： Github + Mermaid

これを使用するには、mermaidを言語として指定する必要があります。

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

これは動作します：

  • PRと問題
  • コメント
  • 要旨

（プレビューと保存の両方）

PS：自分の作品をここに宣伝するのが正しいかどうかはわかりませんが、質問に対する答えだと思います。

7
Alex Mercier

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;

あなたの場合。

2
siddharthkumar patel