✨ feat: add Mermaid diagram support (#370)

content/blog/shortcodes/index.ca.md

@@ -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`.

content/blog/shortcodes/index.es.md

@@ -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`.

content/blog/shortcodes/index.md

@@ -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.