Discurso Mermaid

|||
-|-|-|
:discourse2: | Resumen | Discourse Mermaid te permite crear gráficos muy potentes utilizando la sintaxis de Mermaid.
| :eyeglasses: | Vista previa | Vista previa en el creador de temas de Discourse |
:hammer_and_wrench: | Enlace al repositorio | https://github.com/discourse/discourse-mermaid-theme-component
:open_book: |¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Uso

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

Obtén más información sobre la sintaxis de Mermaid en el sitio web oficial: Mermaid | Diagramming and charting tool

:warning: Los gráficos no se renderizarán en los correos electrónicos

Ajustes

Nombre Descripción
iconos svg
Traducción Predeterminado
rendering_error Error

Asegúrate de que tu código mermaid se esté ejecutando en mermaid.live e indentado con 4 espacios, por ejemplo:

    flowchart TB
    A --> B

insert_mermaid_sample Gráfico Mermaid

:discourse2: ¿Lo alojas tú? Los componentes de tema están disponibles para usar en nuestros planes Pro, Business y Enterprise.

30 Me gusta

El gráfico no muestra el icono cuando usas fontawesome:

Fallé cuando probé con esto:

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

Pero está bien si pruebas aquí:

Se ha publicado una solicitud de características aquí:

3 Me gusta

3 publicaciones se dividieron en un nuevo tema: Actualizar Mermaid a 10.6.1

¿Es posible generar un SVG en lugar de un PNG?

Hola, bienvenido :wave:

Esto no genera una imagen. Renderiza un elemento SVG HTML. Si te refieres al ejemplo en la primera publicación, está destinado a ser una captura de pantalla del resultado. Entiendo que puede ser confuso. Puedes ver un ejemplo en vivo a continuación:

graph TD;
  A --> B;
3 Me gusta

2 publicaciones se fusionaron en un tema existente: Problema de escalado para gráficos

Hola,\n¿No habrá alguna forma de imitar el estilo “tosco” que se puede encontrar en el previsualizador de Mermaid (arriba a la derecha)?
CleanShot 2025-03-04 at 14.11.16

Supongo que hay pocas posibilidades, ya que el código en realidad no cambia, ¡pero vale la pena intentarlo!

2 Me gusta

El escalado funciona de forma extraña en Firefox y no puedo hacer zoom en el gráfico con una altura grande.

Cómo se ve en la publicación:

Captura de pantalla de la publicación

Cómo se ve al expandirse (el clic no hace nada, pero si el gráfico es LR, puedo hacer clic para hacer zoom):

Captura de pantalla expandida

Gráfico de Mermaid del ejemplo:

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

En Chrome funciona mejor.

Mermaid también coloca errores al final de la etiqueta <body/> de discourse

1 me gusta

el post fue escrito originalmente en Русский

Vaya. Estaba en inglés excepto el nombre de la imagen. Gracias, discourse.

Lo que realmente escribí:

Mermaid también coloca errores al final de la etiqueta <cuerpo> del discurso

A mí también me pasa esto después de enviar los cambios, pero si actualizo la página el error desaparece. En mi opinión, no es algo que rompa la funcionalidad, pero sin duda socava la gran experiencia que ofrece.