✨ feat: add Mermaid diagram support (#370)
This commit is contained in:
Óscar
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Sense JavaScript obligatori"
|
||||
date = 2023-01-06
|
||||
updated = 2024-07-01
|
||||
updated = 2024-08-28
|
||||
description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
|
||||
|
||||
[taxonomies]
|
||||
@@ -26,6 +26,7 @@ Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una q
|
||||
Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de `pàgina > secció > config.toml`:
|
||||
|
||||
- [**Suport de KaTeX**](@/blog/markdown/index.ca.md#katex). Habilitat configurant `katex = true` (274 KB).
|
||||
- [**Diagrames de Mermaid**](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid). Habilitat configurant `mermaid = true` (~2.5 MB).
|
||||
- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown/index.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes)
|
||||
- [**Mostrar ruta/URL a blocs de codi**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `add_src_to_code_block = true`. (~400 bytes)
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Sin JavaScript obligatorio"
|
||||
date = 2023-01-06
|
||||
updated = 2024-07-01
|
||||
updated = 2024-08-28
|
||||
description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
|
||||
|
||||
[taxonomies]
|
||||
@@ -26,6 +26,7 @@ Este tema no requiere JavaScript de manera obligatoria. Opcionalmente, puede car
|
||||
Las siguientes opciones pueden especificarse para publicaciones, secciones y a nivel global, siguiendo la jerarquía de `página > sección > config.toml`:
|
||||
|
||||
- [**Soporte de KaTeX**](@/blog/markdown/index.es.md#katex). Habilitado al configurar `katex = true` (274 KB).
|
||||
- [**Diagramas de Mermaid**](@/blog/shortcodes/index.es.md#diagramas-de-mermaid). Habilitado al configurar `mermaid = true` (~2.5 MB).
|
||||
- [**Copia de bloques de código con un solo clic**](@/blog/markdown/index.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes).
|
||||
- [**Mostrar ruta/URL en bloques de código**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `add_src_to_code_block = true`. (~400 bytes)
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "No mandatory JavaScript"
|
||||
date = 2023-01-06
|
||||
updated = 2024-07-01
|
||||
updated = 2024-08-28
|
||||
description = "JavaScript is only used when HTML and CSS aren't enough."
|
||||
|
||||
[taxonomies]
|
||||
@@ -26,6 +26,7 @@ This theme has no mandatory JavaScript. Optionally, it can load a minimal amount
|
||||
The following settings can be specified for posts, sections and globally, following the hierarchy of `page > section > config.toml`:
|
||||
|
||||
- [**KaTeX support**](@/blog/markdown/index.md#katex). Enabled by setting `katex = true` (274 KB).
|
||||
- [**Mermaid diagrams**](@/blog/shortcodes/index.md#mermaid-diagrams). Enabled by setting `mermaid = true` (~2.5 MB).
|
||||
- [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
|
||||
- [**Showing source (path or URL) in code blocks**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `add_src_to_code_block = true`. (~300 bytes)
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Domina la configuració de tabi: guia completa"
|
||||
date = 2023-09-18
|
||||
updated = 2024-08-13
|
||||
updated = 2024-08-28
|
||||
description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
|
||||
|
||||
[taxonomies]
|
||||
@@ -576,6 +576,18 @@ Estableix `add_src_to_code_block = true` per habilitar l'ús del [shortcode `add
|
||||
|
||||
KaTeX és una biblioteca JavaScript ràpida i fàcil d'usar per a la representació de matemàtiques TeX a la web. Pots habilitar-ho amb `katex = true`. Mira com es veu en tabi [aquí](/ca/blog/markdown/#katex).
|
||||
|
||||
### Suport per a Mermaid
|
||||
|
||||
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|
||||
|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
|
||||
| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics basada en JavaScript. Pots activar-la amb `mermaid = true`.
|
||||
|
||||
Per defecte, la biblioteca Mermaid es serveix localment. Si prefereixes utilitzar un CDN, estableix `serve_local_mermaid = false` a `config.toml`. L'ús d'un CDN servirà la versió més recent de Mermaid; l'opció local servirà la versió inclosa amb tabi.
|
||||
|
||||
Consulta la [documentació de Mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) per a instruccions d'ús i exemples.
|
||||
|
||||
### Subconjunt de tipus de lletra personalitzat
|
||||
|
||||
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Domina la configuración de tabi: guía completa"
|
||||
date = 2023-09-18
|
||||
updated = 2024-08-13
|
||||
updated = 2024-08-28
|
||||
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
|
||||
|
||||
[taxonomies]
|
||||
@@ -576,6 +576,18 @@ Establece `add_src_to_code_block = true` para habilitar el uso del [shortcode `a
|
||||
|
||||
KaTeX es una biblioteca JavaScript rápida y fácil de usar para la representación de matemáticas TeX en la web. Puedes habilitarlo con `katex = true`. Mira cómo se ve en tabi [aquí](/es/blog/markdown/#katex).
|
||||
|
||||
### Soporte para Mermaid
|
||||
|
||||
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|
||||
|:------:|:-------:|:-------------:|:----------------:|:-------------------:|
|
||||
| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos basada en JavaScript. Puedes activarla con `mermaid = true`.
|
||||
|
||||
Por defecto, la biblioteca Mermaid se sirve localmente. Si prefieres usar un CDN, establece `serve_local_mermaid = false` en `config.toml`. El uso de un CDN servirá la versión más reciente de Mermaid; la opción local servirá la versión incluida con tabi.
|
||||
|
||||
Consulta la [documentación de Mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) para instrucciones de uso y ejemplos.
|
||||
|
||||
### Subconjunto de fuente personalizada
|
||||
|
||||
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Mastering tabi Settings: A Comprehensive Guide"
|
||||
date = 2023-09-18
|
||||
updated = 2024-08-13
|
||||
updated = 2024-08-28
|
||||
description = "Discover the many ways you can customise your tabi site."
|
||||
|
||||
[taxonomies]
|
||||
@@ -584,6 +584,18 @@ Setting `add_src_to_code_block = true` enables the use of the [`add_src_to_code_
|
||||
|
||||
KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with `katex = true`. See what it looks like in tabi [here](/blog/markdown/#katex).
|
||||
|
||||
### Mermaid Support
|
||||
|
||||
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|
||||
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
|
||||
| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) is a JavaScript-based diagramming and charting tool. You can enable it with `mermaid = true`.
|
||||
|
||||
By default, the Mermaid library is served locally. If you prefer to use a CDN, set `serve_local_mermaid = false` in `config.toml`. Using a CDN will serve the latest version of Mermaid; the local option will serve the version bundled with tabi.
|
||||
|
||||
See the [Mermaid documentation](@/blog/shortcodes/index.md#mermaid-diagrams) for usage instructions and examples.
|
||||
|
||||
### Custom Font Subset
|
||||
|
||||
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Seguretat per defecte"
|
||||
date = 2023-02-22
|
||||
updated = 2024-05-30
|
||||
updated = 2024-08-28
|
||||
description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla."
|
||||
|
||||
[taxonomies]
|
||||
@@ -34,7 +34,7 @@ Pots desactivar les capçaleres (permitint-ho tot) en una pàgina, secció, o gl
|
||||
|
||||
**Notas**:
|
||||
|
||||
- [Habilitar els comentaris](@/blog/comments/index.ca.md) o [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web) automàticament permet scripts/frames/estils/connexions en funció del servei habilitat.
|
||||
- [Habilitar els comentaris](@/blog/comments/index.ca.md), [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web), o [els diagrames de mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) permet automàticament els scripts/frames/estils/conexions pertinents.
|
||||
- Per utilitzar un [tema de resaltat de sintaxis integrat a Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permetre `unsafe-inline` a la directiva `style-src`:
|
||||
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Seguro por defecto"
|
||||
date = 2023-02-22
|
||||
updated = 2024-05-30
|
||||
updated = 2024-08-28
|
||||
description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilmente personalizable con configuraciones seguras. Obtén tranquilidad y una calificación de A+ en Mozilla Observatory."
|
||||
|
||||
[taxonomies]
|
||||
@@ -34,7 +34,7 @@ Puedes desactivar las cabeceras (permitiendo todo) en una página, sección, o g
|
||||
|
||||
**Notas**:
|
||||
|
||||
- [Habilitar los comentarios](@/blog/comments/index.es.md) o [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web) automáticamente permite scripts/frames/estilos/conexiones en función del servicio habilitado.
|
||||
- [Habilitar los comentarios](@/blog/comments/index.es.md), [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web), o [los diagramas mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) permite automáticamente los scripts/frames/estilos/conexiones pertinentes.
|
||||
- Para usar un [tema de resaltado de sintaxis integrado en Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permitir `unsafe-inline` en la directiva `style-src`:
|
||||
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Secure by default"
|
||||
date = 2023-02-22
|
||||
updated = 2024-05-30
|
||||
updated = 2024-08-28
|
||||
description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
|
||||
|
||||
[taxonomies]
|
||||
@@ -34,7 +34,7 @@ You can disable the CSP (allowing all connections) on a page, section, or global
|
||||
|
||||
**Notes**:
|
||||
|
||||
- [Enabling comments](@/blog/comments/index.md) or [analytics](@/blog/mastering-tabi-settings/index.md#analytics) automatically allows scripts/frames/styles/connections as needed from the respective services.
|
||||
- [Enabling comments](@/blog/comments/index.md), [analytics](@/blog/mastering-tabi-settings/index.md#analytics), or [mermaid diagrams](@/blog/shortcodes/index.md#mermaid-diagrams) automatically allows scripts/frames/styles/connections as needed.
|
||||
- To use a [Zola built-in syntax highlighting theme](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), you need to allow `unsafe-inline` in the `style-src` directive:
|
||||
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Shortcodes personalitzats"
|
||||
date = 2023-02-19
|
||||
updated = 2024-06-27
|
||||
updated = 2024-08-28
|
||||
description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran."
|
||||
|
||||
[taxonomies]
|
||||
@@ -12,9 +12,85 @@ toc = true
|
||||
toc_levels = 2
|
||||
quick_navigation_buttons = true
|
||||
add_src_to_code_block = true
|
||||
mermaid = true
|
||||
social_media_card = "social_cards/ca_blog_shortcodes.jpg"
|
||||
+++
|
||||
|
||||
## Shortcodes de diagrames
|
||||
|
||||
### Diagrames de Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics que utilitza text i codi per generar diagrames. Admet diagrames de flux, diagrames de seqüència, gràfics de Gantt i més.
|
||||
|
||||
Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses:
|
||||
|
||||
1. Estableix `mermaid = true` a la secció `[extra]` del front matter de la teva pàgina, secció o `config.toml`. Això carregarà el JavaScript necessari per renderitzar els diagrames.
|
||||
|
||||
2. Utilitza el shortcode `mermaid()` per definir el teu diagrama. Per exemple:
|
||||
|
||||
```plaintext
|
||||
{%/* mermaid() */%}
|
||||
classDiagram
|
||||
class DistorsionsCognitives {
|
||||
+PensamentTotORes()
|
||||
+Sobregeneralitzacio()
|
||||
+FiltreMental()
|
||||
+TreureConclusionsPrecipitades()
|
||||
}
|
||||
class PensamentTotORes {
|
||||
+VeureEnExtrems()
|
||||
}
|
||||
class Sobregeneralitzacio {
|
||||
+GeneralitzarDUnic()
|
||||
}
|
||||
class FiltreMental {
|
||||
+EnfocarseEnNegatiu()
|
||||
}
|
||||
class TreureConclusionsPrecipitades {
|
||||
+FerSuposicions()
|
||||
}
|
||||
DistorsionsCognitives *-- PensamentTotORes
|
||||
DistorsionsCognitives *-- Sobregeneralitzacio
|
||||
DistorsionsCognitives *-- FiltreMental
|
||||
DistorsionsCognitives *-- TreureConclusionsPrecipitades
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
El diagrama es renderitzarà així:
|
||||
|
||||
{% mermaid() %}
|
||||
classDiagram
|
||||
class DistorsionsCognitives {
|
||||
+PensamentTotORes()
|
||||
+Sobregeneralitzacio()
|
||||
+FiltreMental()
|
||||
+TreureConclusionsPrecipitades()
|
||||
}
|
||||
class PensamentTotORes {
|
||||
+VeureEnExtrems()
|
||||
}
|
||||
class Sobregeneralitzacio {
|
||||
+GeneralitzarDUnic()
|
||||
}
|
||||
class FiltreMental {
|
||||
+EnfocarseEnNegatiu()
|
||||
}
|
||||
class TreureConclusionsPrecipitades {
|
||||
+FerSuposicions()
|
||||
}
|
||||
DistorsionsCognitives *-- PensamentTotORes
|
||||
DistorsionsCognitives *-- Sobregeneralitzacio
|
||||
DistorsionsCognitives *-- FiltreMental
|
||||
DistorsionsCognitives *-- TreureConclusionsPrecipitades
|
||||
{% end %}
|
||||
|
||||
El shortcode de Mermaid admet dos paràmetres:
|
||||
|
||||
- `invertible`: Si s'estableix a `true` (per defecte), el diagrama invertirà els seus colors en mode fosc, igual que les [imatges invertibles](#imatge-invertible).
|
||||
- `full_width`: Permet que el diagrama ocupi l'amplada de la capçalera. Mira [imatge d'amplada completa](#imatge-d-amplada-completa).
|
||||
|
||||
{{ admonition(type="tip", title="CONSELL", text="Empra l'[editor de Mermaid](https://mermaid.live/) per crear i previsualitzar els teus diagrames.") }}
|
||||
|
||||
## Shortcodes d'imatge
|
||||
|
||||
Tots els shortcodes d'imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre `src`.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Shortcodes personalizados"
|
||||
date = 2023-02-19
|
||||
updated = 2024-06-27
|
||||
updated = 2024-08-28
|
||||
description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
|
||||
|
||||
[taxonomies]
|
||||
@@ -12,9 +12,85 @@ toc = true
|
||||
toc_levels = 2
|
||||
quick_navigation_buttons = true
|
||||
add_src_to_code_block = true
|
||||
mermaid = true
|
||||
social_media_card = "social_cards/es_blog_shortcodes.jpg"
|
||||
+++
|
||||
|
||||
## Shortcodes de diagramas
|
||||
|
||||
### Diagramas de Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos que usa texto y código para generar diagramas. Admite diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más.
|
||||
|
||||
Para incluir un diagrama Mermaid en tu publicación, sigue estos dos pasos:
|
||||
|
||||
1. Establece `mermaid = true` en la sección `[extra]` del front matter de tu página, sección o `config.toml`. Esto cargará el JavaScript necesario para renderizar los diagramas.
|
||||
|
||||
2. Usa el shortcode `mermaid()` para definir tu diagrama. Por ejemplo:
|
||||
|
||||
```plaintext
|
||||
{%/* mermaid() */%}
|
||||
classDiagram
|
||||
class DistorsionesCognitivas {
|
||||
+PensamientoTodoONada()
|
||||
+Sobregeneralizacion()
|
||||
+FiltroMental()
|
||||
+SacarConclusionesPrecipitadas()
|
||||
}
|
||||
class PensamientoTodoONada {
|
||||
+VerEnExtremos()
|
||||
}
|
||||
class Sobregeneralizacion {
|
||||
+GeneralizarDeUnicoEjemplo()
|
||||
}
|
||||
class FiltroMental {
|
||||
+EnfocarseEnNegativo()
|
||||
}
|
||||
class SacarConclusionesPrecipitadas {
|
||||
+HacerSuposiciones()
|
||||
}
|
||||
DistorsionesCognitivas *-- PensamientoTodoONada
|
||||
DistorsionesCognitivas *-- Sobregeneralizacion
|
||||
DistorsionesCognitivas *-- FiltroMental
|
||||
DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
El diagrama se renderizará así:
|
||||
|
||||
{% mermaid() %}
|
||||
classDiagram
|
||||
class DistorsionesCognitivas {
|
||||
+PensamientoTodoONada()
|
||||
+Sobregeneralizacion()
|
||||
+FiltroMental()
|
||||
+SacarConclusionesPrecipitadas()
|
||||
}
|
||||
class PensamientoTodoONada {
|
||||
+VerEnExtremos()
|
||||
}
|
||||
class Sobregeneralizacion {
|
||||
+GeneralizarDeUnicoEjemplo()
|
||||
}
|
||||
class FiltroMental {
|
||||
+EnfocarseEnNegativo()
|
||||
}
|
||||
class SacarConclusionesPrecipitadas {
|
||||
+HacerSuposiciones()
|
||||
}
|
||||
DistorsionesCognitivas *-- PensamientoTodoONada
|
||||
DistorsionesCognitivas *-- Sobregeneralizacion
|
||||
DistorsionesCognitivas *-- FiltroMental
|
||||
DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
|
||||
{% end %}
|
||||
|
||||
El shortcode de Mermaid admite dos parámetros:
|
||||
|
||||
- `invertible`: Si se establece en `true` (por defecto), el diagrama se invertirá en modo oscuro, igual que las [imágenes invertibles](#imagen-invertible).
|
||||
- `full_width`: Permite que el diagrama ocupe el ancho del encabezado. Mira [imagen a ancho completo](#imagen-a-ancho-completo).
|
||||
|
||||
{{ admonition(type="tip", title="CONSEJO", text="Puedes usar el [editor de Mermaid](https://mermaid.live/) para crear y previsualizar tus diagramas.") }}
|
||||
|
||||
## Shortcodes de imagen
|
||||
|
||||
Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro `src`.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Custom shortcodes"
|
||||
date = 2023-02-19
|
||||
updated = 2024-06-27
|
||||
updated = 2024-08-28
|
||||
description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
|
||||
|
||||
[taxonomies]
|
||||
@@ -12,9 +12,85 @@ toc = true
|
||||
toc_levels = 2
|
||||
quick_navigation_buttons = true
|
||||
add_src_to_code_block = true
|
||||
mermaid = true
|
||||
social_media_card = "social_cards/blog_shortcodes.jpg"
|
||||
+++
|
||||
|
||||
## Diagram shortcode
|
||||
|
||||
### Mermaid diagrams
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more.
|
||||
|
||||
To include a Mermaid diagram in your post, there are two steps:
|
||||
|
||||
1. Set `mermaid = true` in the `[extra]` section of the front matter of your page, section or `config.toml`. This will load the JavaScript needed to render the diagrams.
|
||||
|
||||
2. Use the `mermaid()` shortcode to define your diagram in your posts. For example:
|
||||
|
||||
```plaintext
|
||||
{%/* mermaid() */%}
|
||||
classDiagram
|
||||
class CognitiveDistortions {
|
||||
+AllOrNothingThinking()
|
||||
+Overgeneralization()
|
||||
+MentalFilter()
|
||||
+JumpingToConclusions()
|
||||
}
|
||||
class AllOrNothingThinking {
|
||||
+SeeInExtremes()
|
||||
}
|
||||
class Overgeneralization {
|
||||
+GeneralizeFromSingle()
|
||||
}
|
||||
class MentalFilter {
|
||||
+FocusOnNegative()
|
||||
}
|
||||
class JumpingToConclusions {
|
||||
+MakeAssumptions()
|
||||
}
|
||||
CognitiveDistortions *-- AllOrNothingThinking
|
||||
CognitiveDistortions *-- Overgeneralization
|
||||
CognitiveDistortions *-- MentalFilter
|
||||
CognitiveDistortions *-- JumpingToConclusions
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
The diagram will be rendered as follows:
|
||||
|
||||
{% mermaid() %}
|
||||
classDiagram
|
||||
class CognitiveDistortions {
|
||||
+AllOrNothingThinking()
|
||||
+Overgeneralization()
|
||||
+MentalFilter()
|
||||
+JumpingToConclusions()
|
||||
}
|
||||
class AllOrNothingThinking {
|
||||
+SeeInExtremes()
|
||||
}
|
||||
class Overgeneralization {
|
||||
+GeneralizeFromSingle()
|
||||
}
|
||||
class MentalFilter {
|
||||
+FocusOnNegative()
|
||||
}
|
||||
class JumpingToConclusions {
|
||||
+MakeAssumptions()
|
||||
}
|
||||
CognitiveDistortions *-- AllOrNothingThinking
|
||||
CognitiveDistortions *-- Overgeneralization
|
||||
CognitiveDistortions *-- MentalFilter
|
||||
CognitiveDistortions *-- JumpingToConclusions
|
||||
{% end %}
|
||||
|
||||
The Mermaid shortcode supports two parameters:
|
||||
|
||||
- `invertible`: If set to `true` (default), the diagram will be inverted in dark mode, just like [invertible images](#invertible-image).
|
||||
- `full_width`: Allows the diagram to take up the width of the header. See [full-width image](#full-width-image).
|
||||
|
||||
{{ admonition(type="tip", text="You can use the [Mermaid Live Editor](https://mermaid.live/) to create and preview your diagrams.") }}
|
||||
|
||||
## Image shortcodes
|
||||
|
||||
All image shortcodes support absolute paths, relative paths, and remote sources in the `src` parameter.
|
||||
|
||||
Reference in New Issue
Block a user