Discourse Meerjungfrau

[Discourse]

||||\n-|-|-|\n:discourse2: | Zusammenfassung | Discourse Mermaid ermöglicht es Ihnen, sehr leistungsstarke Diagramme mit der Mermaid-Syntax zu erstellen.\n| | Vorschau | Vorschau im Discourse Theme Creator |\n:hammer_and_wrench: | Repository-Link | \u003chttps://github.com/discourse/discourse-mermaid-theme-component\u003e\n:open_book: |Neu bei Discourse Themes? | Anfängerleitfaden zur Verwendung von Discourse Themes\n\n[wrap=theme-install-button repoUrl="https://github.com/discourse/discourse-mermaid-theme-component\" repoName="Discourse Mermaid"]\nDiese Theme-Komponente installieren\n[/wrap]\n\n[quote]\n\n:discourse2: Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können Support, Bug, UX und #feature-Anfragen in den entsprechenden Kategorien hier auf Meta gestellt und mit dem entsprechenden Tag für die Theme-Komponente versehen werden. Klicken Sie auf einen der folgenden Links, um eine zu starten. \n\n\u003ckbd\u003e [\u0026nbsp;Support](Discourse Meta "Bitten Sie um Unterstützung bei der Konfiguration und Verwendung von Discourse Mermaid") \u003c/kbd\u003e \u003ckbd\u003e [\u0026nbsp;Bug](Discourse Meta "Ein Fehlerbericht bedeutet, dass etwas kaputt ist und die normale/typische Verwendung der Theme-Komponente verhindert") \u003c/kbd\u003e \u003ckbd\u003e [\u0026nbsp;UX](Discourse Meta "Diskussion über die Benutzeroberfläche von Discourse Mermaid und wie Funktionen präsentiert werden (einschließlich Sprache und UI-Elemente)") \u003c/kbd\u003e \u003ckbd\u003e [\u0026nbsp;Feature](Discourse Meta "Diskussion darüber, wie bestehende Discourse Mermaid-Funktionen verbessert oder erweitert werden können und wie vorgeschlagene neue Funktionen funktionieren könnten")\u003c/kbd\u003e\n\n[/quote]\n\n### Verwendung\n\n\n```mermaid height=200\ngraph TD;\n A --\u003e B;\n```\n\n\n

\n\nErfahren Sie mehr über die Mermaid-Syntax auf der offiziellen Website: Mermaid | Diagramming and charting tool Diagramme werden nicht in E-Mails gerendert\n\n### Einstellungen\n\n| Name | Beschreibung\n|-|-|\n| svg icons | \n\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e \u003cb\u003eÜbersetzung \u003c/td\u003e\u003ctd\u003e\u003cb\u003e Standard\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e rendering_error \u003c/td\u003e\u003ctd\u003e\n\n\\u003cb\u003eFehler\\u003c/b\u003e\\u003cp\u003eBitte stellen Sie sicher, dass Ihr Mermaid-Code auf \\u003ca href=‘https://mermaid.live/’\u003emermaid.live\u003c/a\u003e ausgeführt wird und mit 4 Leerzeichen eingerückt ist, z. B.: \\u003cpre\u003e\\u003ccode\u003e flowchart TB\n A –\u003e B\\u003c/code\u003e\\u003c/pre\u003e\\u003c/p\u003e\n\n\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003einsert_mermaid_sample \u003c/td\u003e\u003ctd\u003eMermaid-Diagramm\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n\u003e:discourse2: Bei uns gehostet? Theme-Komponenten sind für unsere Pro-, Business- und Enterprise-Tarife verfügbar.

[cmdntd]

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:

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

Hier wurde eine Funktionsanfrage gepostet:

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)]

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

[Arkshine]

Hallo, willkommen

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;

[putty (Derek Putnam)]

Hallo,

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

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

[volas (Alexander V)]

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.

[volas (Alexander V)]

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

[volas (Alexander V)]

@volas

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

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

[Tris20 (Tristan)]

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.