Discourse Mermaid

[Discourse]

|||
-|-|-|
| Resumo | Discourse Mermaid permite criar gráficos muito poderosos usando a sintaxe Mermaid.
| | Pré-visualização | Pré-visualizar no Criador de Temas do Discourse |
| Link do Repositório | https://github.com/discourse/discourse-mermaid-theme-component
|Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Como este é um componente de tema #oficial mantido pela equipe do Discourse, #suporte, #bugs, UX e solicitações de #funcionalidades podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

Suporte Bug UX Funcionalidade

Uso

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

Saiba mais sobre a sintaxe Mermaid no site oficial: Mermaid | Diagramming and charting tool

Gráficos não serão renderizados em e-mails

Configurações

Nome	Descrição
ícones svg

Tradução	Padrão
rendering_error	Erro Por favor, certifique-se de que seu código mermaid está rodando em mermaid.live e indentado com 4 espaços, por exemplo: flowchart TB A --> B
insert_mermaid_sample	Gráfico Mermaid

Hospedado conosco? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.

[cmdntd]

O gráfico não exibe o ícone quando você usa o fontawesome:

Falhei quando testei com isto:

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

Mas funciona se você testar aqui:

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

Uma solicitação de recurso foi postada aqui:

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

É possível gerar um SVG em vez de PNG?

[Arkshine]

Olá, bem-vindo

Isso não gera uma imagem. Ele renderiza um elemento SVG HTML. Se você se referir ao exemplo na primeira postagem, ele deve ser uma captura de tela do resultado. Entendo que isso pode ser confuso. Você pode ver um exemplo ao vivo abaixo:

graph TD;
  A --> B;

[putty (Derek Putnam)]

Olá,\n\nNão sei se há uma maneira de imitar o estilo “rústico” que pode ser encontrado no visualizador Mermaid (canto superior direito):\n\n\nImagino que seja uma chance pequena, já que o código na verdade não muda, mas vale a pena tentar!

[volas (Alexander V)]

O dimensionamento funciona de forma estranha no Firefox, e não consigo ampliar o gráfico com altura grande.

Como aparece na postagem:

Captura de tela da postagem

Como aparece quando expandido (clicar não faz nada, mas se o gráfico for LR, posso clicar para ampliar):

Captura de tela expandida

Gráfico Mermaid do exemplo:

Gráfico

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

No Chrome funciona melhor.

[volas (Alexander V)]

Mermaid também coloca erros no final da tag <body/> do discourse

[volas (Alexander V)]

@volas

Mermaid também coloca erros no final da tag <html><body> do discourse

post foi escrito originalmente em Russo

Huh. Estava em inglês, exceto o nome da imagem. Obrigado, discourse.

O que eu realmente escrevi:

Mermaid também coloca erros no final da tag <html><body> do discourse

[Tris20 (Tristan)]

Eu também recebo isso depois de enviar as alterações, mas se eu atualizar a página, o erro desaparece. Na minha opinião, não é algo que quebre a funcionalidade, mas definitivamente prejudica a experiência, que de outra forma é ótima.