Discourse Mermaid

:discourse2: 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 Discourse Theme Creator
:hammer_and_wrench: Lien vers le dépôt https://github.com/discourse/discourse-mermaid-theme-component
:open_book: Nouveau dans les thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Utilisation

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

En savoir plus sur la syntaxe Mermaid sur le site officiel : Mermaid | Diagramming and charting tool

:warning: Les graphiques ne seront pas rendus dans les e-mails

Paramètres

Nom Description
icônes svg
Traduction Par défaut
rendering_error

<b>Erreur</b><p>Veuillez vous assurer que votre code mermaid fonctionne sur <a href=‘https://mermaid.live/’>mermaid.live et indenté avec 4 espaces, par exemple : <pre><code> flowchart TB
A → B</code></pre></p>

insert_mermaid_sample Graphique Mermaid

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

31 « J'aime »

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 :

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

3 « J'aime »

3 messages ont été déplacées vers un nouveau sujet : Mise à niveau de Mermaid vers 10.6.1

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

Salut, bienvenue :wave:

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;
3 « J'aime »

2 messages ont été fusionnées dans un sujet existant : Problème de mise à l’échelle pour les graphiques

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) :\nCleanShot 2025-03-04 at 14.11.16\n\nJe suppose que les chances sont minces puisque le code ne change pas réellement, mais ça vaut le coup d’essayer !

2 « J'aime »

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.

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

1 « J'aime »

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

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.

Est-ce que click est actuellement pris en charge dans les diagrammes mermaid ?

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"

Je peux voir le lien être créé dans le code source de la page, mais ils ne fonctionnent pas.

Quelle version de Mermaid est prise en charge par ce composant ?

2 « J'aime »

Quelle est la cadence habituelle des mises à jour de Discourse Mermaid concernant la bibliothèque sous-jacente mermaid.js ? Je pose cette question car, à partir de la version 11.14, un nouveau type de diagramme Wardley Mapping est inclus (en bêta), ce qui intéresse considérablement mes communautés.

Au moment où j’écris ces lignes, la dernière version est la 11.15.0 et il est rapporté que la fonctionnalité Wardley est désormais suffisamment stable.

Si une proposition de modification (PR) serait acceptée, je serais ravi d’en rédiger une rapidement !

2 « J'aime »

Une PR est en effet la bienvenue !

1 « J'aime »