Discourse Mermaid

[Discourse]

|||
-|-|-|
| Résumé | Discourse Mermaid vous permet de créer des graphiques très puissants en utilisant la syntaxe Mermaid.
| : eyeglasses: | Aperçu | Aperçu sur le créateur de thèmes Discourse |
| Lien vers le dépôt | https://github.com/discourse/discourse-mermaid-theme-component
|Nouveau sur les thèmes Discourse ? | Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Comme il s’agit d’un composant de thème #officiel maintenu par l’équipe Discourse, les demandes de Support, de Bug, de UX et de Feature peuvent être faites dans les catégories respectives ici sur Meta, et taguées avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en commencer une.

Support Bug UX Fonctionnalité

Utilisation

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

Apprenez-en davantage sur la syntaxe Mermaid sur le site officiel : Mermaid | Diagramming and charting tool

Les graphiques ne seront pas rendus dans les e-mails

Paramètres

Nom	Description
icônes svg

Traduction	Défaut
rendering_error	Erreur Veuillez vous assurer que votre code mermaid s'exécute sur mermaid.live et est indenté de 4 espaces, par exemple : flowchart TB A --> B
insert_mermaid_sample	Graphique Mermaid

Hébergé par nous ? Les composants de thème sont disponibles pour utilisation sur nos plans Pro, Business et Entreprise.

[cmdntd]

Le graphique n’affiche pas l’icône lorsque vous utilisez fontawesome :

J’ai échoué lorsque j’ai testé avec ceci :

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

Mais cela fonctionne si vous testez ici :

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

Une demande de fonctionnalité a été publiée ici :

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

Est-il possible de générer un SVG au lieu d’un PNG ?

[Arkshine]

Salut, bienvenue

Cela ne génère pas d’image. Cela rend un élément SVG HTML. Si vous vous référez à l’exemple dans le premier post, il est censé être une capture d’écran du résultat. Je comprends que cela puisse être déroutant. Vous pouvez voir un exemple en direct ci-dessous :

graph TD;
  A --> B;

[putty (Derek Putnam)]

Salut,\n\nJe me demande s’il existe un moyen d’imiter le style « brut » que l’on trouve dans l’aperçu de Mermaid (en haut à droite) :\n\n\nJe suppose que les chances sont minces puisque le code ne change pas réellement, mais ça vaut le coup d’essayer !

[volas (Alexander V)]

La mise à l’échelle fonctionne étrangement dans Firefox, et je ne peux pas zoomer sur le graphique avec une grande hauteur.

Voici à quoi cela ressemble dans le post :

Capture d'écran du post

Voici à quoi cela ressemble lorsqu’il est développé (cliquer ne fait rien, mais si le graphique est LR, je peux cliquer pour zoomer) :

Capture d'écran développée

Graphique Mermaid de l’exemple :

Graphique

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

Dans Chrome, cela fonctionne mieux.

[volas (Alexander V)]

Mermaid place aussi des erreurs à la fin de la balise <body/> de discourse

[volas (Alexander V)]

@volas

Mermaid place également des erreurs à la fin de la balise <body> du discours

le message a été écrit à l’origine en Русский

Hein. C’était en anglais sauf le nom de l’image. Merci, discourse.

Ce que j’ai réellement écrit :

Mermaid place également des erreurs à la fin de la balise <body> du discours

[Tris20 (Tristan)]

Je rencontre également ce problème après avoir soumis des modifications, mais si j’actualise ma page, l’erreur disparaît. À mon avis, ce n’est pas quelque chose qui interrompt la fonctionnalité, mais cela mine définitivement l’expérience par ailleurs excellente.