Discourse Mermaid

[Discourse]

|||
-|-|-|
| Riepilogo | Discourse Mermaid ti consente di creare grafici molto potenti utilizzando la sintassi Mermaid.
| : eyeglasses: | Anteprima | Anteprima su Discourse Theme Creator |
| Link al repository | https://github.com/discourse/discourse-mermaid-theme-component
|Nuovo per i temi di Discourse? | Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

Poiché si tratta di un componente del tema #ufficiale mantenuto dal team di Discourse, #supporto, Bug, UX e richieste di #funzionalità possono essere effettuate nelle rispettive categorie qui su Meta, e taggate con il tag appropriato del componente del tema. Fai clic su un link qui sotto per avviarne uno.

Supporto Bug UX Funzionalità

Utilizzo

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

Scopri di più sulla sintassi Mermaid sul sito ufficiale: Mermaid | Diagramming and charting tool

I grafici non verranno visualizzati nelle email

Impostazioni

Nome	Descrizione
icone svg

Traduzione	Predefinito
rendering_error	Errore Assicurati che il tuo codice mermaid sia in esecuzione su mermaid.live e indentato con 4 spazi, ad esempio: flowchart TB A --> B
insert_mermaid_sample	Grafico Mermaid

Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Pro, Business e Enterprise.

[cmdntd]

Il grafico non visualizza l’icona quando si utilizza fontawesome:

Ho fallito quando ho testato con questo:

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

Ma funziona se testi qui:

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

È stata pubblicata una richiesta di funzionalità qui:

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

È possibile generare un SVG invece di un PNG?

[Arkshine]

Ciao, benvenuto

Questo non genera un’immagine. Esegue il rendering di un elemento SVG HTML. Se fai riferimento all’esempio nel primo post, si intende uno screenshot del risultato. Capisco che possa creare confusione. Puoi vedere un esempio live di seguito:

graph TD;
  A --> B;

[putty (Derek Putnam)]

Ciao,\nNon c’è per caso un modo per imitare lo stile “ruvido” che si trova nell’anteprima di Mermaid (in alto a destra):\n\n\nImmagino sia una possibilità remota dato che il codice non cambia effettivamente, ma vale la pena tentare!

[volas (Alexander V)]

La scalatura funziona in modo strano in Firefox e non riesco a ingrandire il grafico con un’altezza elevata.

Come appare nel post:

Screenshot del post

Come appare quando espanso (il clic non fa nulla, ma se il grafico è LR allora posso cliccare per ingrandire):

Screenshot espanso

Grafico Mermaid dall’esempio:

Grafico

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 funziona meglio.

[volas (Alexander V)]

Mermaid posiziona anche gli errori alla fine del tag <body/> di discourse

[volas (Alexander V)]

@volas

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

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

Huh. It was in English except the image name. Thanks, discourse.

What i actually wrote:

Mermaid also places errors at the end of the <body/> tag of discourse

[Tris20 (Tristan)]

Anche io ho riscontrato questo problema dopo aver inviato le modifiche, ma se aggiorno la pagina l’errore scompare. Secondo me non è qualcosa che compromette la funzionalità, ma sicuramente mina l’esperienza altrimenti ottima.