Discourse Mermaid

:discourse2: Zusammenfassung Discourse Mermaid ermöglicht es dir, sehr leistungsfähige Diagramme mit der Mermaid-Syntax zu erstellen.
:eyeglasses: Vorschau Vorschau im Discourse Theme Creator
:hammer_and_wrench: Link zum Repository https://github.com/discourse/discourse-mermaid-theme-component
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Modul installieren

Verwendung

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

Erfahre mehr über die Mermaid-Syntax auf der offiziellen Website: Mermaid | Diagramming and charting tool

:warning: Diagramme werden in E-Mails nicht gerendert

Einstellungen

Name Beschreibung
svg icons
Übersetzung Standard
rendering_error

<b>Fehler</b><p>Stelle sicher, dass dein Mermaid-Code auf <a href=‘https://mermaid.live/’>mermaid.live ausgeführt wird und mit 4 Leerzeichen eingerückt ist, z. B.: <pre><code> flowchart TB
A → B</code></pre></p>

insert_mermaid_sample Mermaid-Diagramm

:discourse2: Von uns gehostet? Theme-Module stehen in unseren Pro-, Business- und Enterprise-Plänen zur Verfügung.

31 „Gefällt mir“

Diagramm zeigt kein Symbol an, wenn Sie FontAwesome verwenden:

Ich bin bei meinem Test mit Folgendem fehlgeschlagen:

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

Aber es funktioniert, wenn Sie hier testen:

Hier wurde eine Funktionsanfrage gepostet:

3 „Gefällt mir“

3 Beiträge wurden in ein neues Thema aufgeteilt: Upgrade Mermaid auf 10.6.1

Ist es möglich, eine SVG anstelle einer PNG zu generieren?

Hallo, willkommen :wave:

Dies generiert kein Bild. Es rendert ein SVG-HTML-Element. Wenn Sie sich auf das Beispiel im ersten Beitrag beziehen, ist es als Screenshot des Ergebnisses gedacht. Ich verstehe, dass es verwirrend sein könnte. Sie können unten ein Live-Beispiel sehen:

graph TD;
  A --> B;
3 „Gefällt mir“

2 Beiträge wurden in ein bestehendes Thema zusammengeführt: Skalierungsproblem für Diagramme

Hallo,

Gibt es vielleicht eine Möglichkeit, den „rauen“ Stil zu imitieren, wie er im Mermaid-Vorschaufenster (oben rechts) zu finden ist:
CleanShot 2025-03-04 at 14.11.16

Ich vermute, die Chancen sind gering, da sich der Code tatsächlich nicht ändert, aber ein Versuch ist es wert!

2 „Gefällt mir“

Das Skalieren funktioniert in Firefox seltsam, und ich kann das Diagramm mit großer Höhe nicht vergrößern.

So sieht es im Beitrag aus:

Screenshot des Beitrags

So sieht es im erweiterten Zustand aus (Klick tut nichts, aber wenn das Diagramm LR ist, kann ich zum Zoomen klicken):

Erweiterter Screenshot

Mermaid-Diagramm aus dem Beispiel:

Diagramm
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

In Chrome funktioniert es besser.

Mermaid platziert Fehler auch am Ende des <body/>-Tags von Discourse

1 „Gefällt mir“

Der Beitrag wurde ursprünglich auf Russisch verfasst

Huh. Es war auf Englisch, bis auf den Bildnamen. Danke, Discourse.

Was ich eigentlich geschrieben habe:

Mermaid platziert ebenfalls Fehler am Ende des <body>-Tags des Diskurses

Ich bekomme das auch, nachdem ich Änderungen eingereicht habe, aber wenn ich meine Seite aktualisiere, verschwindet der Fehler. IMO nichts, was die Funktionalität beeinträchtigt, aber definitiv die ansonsten großartige Erfahrung untergräbt.

Wird click derzeit innerhalb von Mermaid-Diagrammen unterstützt?

flowchart TD
   start --> relative
   relative --> absolute
   absolute --> external

   click relative "/categories" "tooltip1"
   click absolute "https://meta.discourse.org/docs" "tooltip2"
   click external "https://github.com/" "tooltip3"

Ich kann sehen, dass der Link im Seitenquelltext erstellt wird, aber er funktioniert nicht.

Welche Mermaid-Version wird von dieser Komponente unterstützt?

2 „Gefällt mir“