Discourse Mermaid

[Discourse]

|||
-|-|-|
| 概要 | Discourse Mermaid を使用すると、Mermaid の構文を使用して非常に強力なグラフを作成できます。
| : eyeglasses: | プレビュー | Discourse Theme Creator でプレビュー |
| リポジトリリンク | https://github.com/discourse/discourse-mermaid-theme-component
|Discourse テーマは初めてですか？ | Discourse テーマの使用方法（初心者ガイド）

このテーマコンポーネントをインストール

これは Discourse チームによって保守されている official テーマコンポーネントであるため、#support、#bug、#ux、および Feature リクエストは、Meta の該当するカテゴリで、適切なテーマコンポーネントタグを付けて行うことができます。開始するには、以下のリンクのいずれかをクリックしてください。

サポート バグ UX 機能

使用方法

```mermaid height=200
graph TD;
  A --> B;
```

Mermaid 構文の詳細については、公式ウェブサイトをご覧ください: Mermaid | Diagramming and charting tool

グラフはメールではレンダリングされません

設定

名前	説明
svg icons

翻訳	デフォルト
rendering_error	エラー Mermaid コードが mermaid.live で実行され、4 スペースでインデントされていることを確認してください。例: flowchart TB A --> B
insert_mermaid_sample	Mermaid チャート

当社でホストしていますか？ テーマコンポーネントは、Pro、Business、Enterprise プランで利用できます。

[cmdntd]

Chart does not display icon when you use fontawesome:

I failed when I tesed with this:

flowchart LR
    A[fas:fa-plane-departure Airline] -->|11/04/2024| B

But it is ok if you test here:

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

機能リクエストがここに投稿されました：

Support Font Awesome icons in Discourse Mermaid

This is great, thanks! It doesn’t seen that font-awesome icons are supported An example from the docs: flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) Code: flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) Is there a supported way to embed font-awesome icons?

[katzuv (Dan Katzuv)]

PNGではなくSVGを生成することは可能ですか？

[Arkshine]

こんにちは、ようこそ

これは画像を生成するものではありません。SVG HTML要素をレンダリングします。最初の投稿の例を参照すると、それは結果のスクリーンショットを意図したものです。紛らわしいかもしれませんが、理解できます。以下にライブ例を示します。

graph TD;
  A --> B;

[putty (Derek Putnam)]

こんにちは。

Mermaidプレビューア（右上）で見られるような「ラフ」なスタイルを模倣する方法はありますか？

コードは実際には変更されないため、可能性は低いと思いますが、試す価値はあります！

[volas (Alexander V)]

Firefoxでのスケーリングが奇妙で、高さのあるチャートをズームインできません。

投稿での表示：

投稿のスクリーンショット

展開時の表示（クリックしても何も起こりませんが、チャートがLRの場合はズームのためにクリックできます）：

展開時のスクリーンショット

例のMermaidチャート：

チャート

flowchart TD
    A["Lorem ipsum dolor"] --> B["Sit amet consectetur"]
    A --> C["Adipiscing elit sed"]
    B --> E["Do eiusmod tempor"]
    C --> D["Incididunt ut labore"]
    D --> F["Et dolore magna"]
    E --> G["Aliqua ut enim"]
    F --> G
    G --> H["Ad minim veniam"]
    H --> I["Quis nostrud exercitation"]
    C --> J["Ullamco laboris nisi"]
    I --> K["Ut aliquip ex"]
    J --> L["Ea commodo consequat"]
    L --> M["Duis aute irure"]
    M --> N["Dolor in reprehenderit"]
    N --> O["In voluptate velit"]
    K --> P["Esse cillum dolore"]
    P --> Q["Eu fugiat nulla"]
    Q --> R["Pariatur excepteur sint"]
    L --> S["Occaecat cupidatat non"]
    F --> T["Proident sunt in"]
    S --> U["Culpa qui officia"]
    U --> V["Deserunt mollit anim"]
    R --> W["Id est laborum"]
    W --> X["Sed ut perspiciatis"]
    O --> Y["Unde omnis iste"]
    X --> Z["Natus error sit"]
    Z --> AA["Voluptatem accusantium doloremque"]
    AA --> AB["Laudantium totam rem"]
    AB --> AC["Aperiam eaque ipsa"]
    AC --> AD["Quae ab illo"]
    T --> Y
    V --> Q
    D --> M
    E --> R

Chromeではよりうまく機能します。

[volas (Alexander V)]

Mermaid は、ディスコースの <body/> タグの末尾にもエラーを配置します。

[volas (Alexander V)]

@volas

Mermaid place également des erreurs à la fin de la balise �3cbody�3e du discours

post was originally written in Русский

ふむ。画像名以外は英語だった。ありがとう、Discourse。

実際に書いたこと：

Mermaid also places errors at the end of the �3cbody�3e tag of discourse

[Tris20 (Tristan)]

変更を送信した後、私もこれが発生しますが、ページをリフレッシュするとエラーは消えます。IMOは機能を損なうものではありませんが、そうでなければ素晴らしい体験を確実に損ないます。