Support Mermaid.js for diagrams

docs/snippets/about-eventing.md

@@ -4,6 +4,21 @@
 -->
 Knative Eventing is a collection of APIs that enable you to use an [event-driven architecture](https://en.wikipedia.org/wiki/Event-driven_architecture){target=_blank} with your applications. You can use these APIs to create components that route events from event producers (known as sources) to event consumers (known as sinks) that receive events. Sinks can also be configured to respond to HTTP requests by sending a response event.
 
+``` mermaid
+architecture-beta
+    group eventing[Eventing]
+    group sources[Event Sources]
+
+    service source(cloud)[Event Source] in sources
+    service broker(database)[Broker] in eventing
+    service trigger(server)[Trigger] in eventing
+    service sink(internet)[Event Target]
+
+    source{group}:T --> B:broker
+    broker:R -- L:trigger
+    trigger:B --> T:sink
+```
+
 Knative Eventing is a standalone platform that provides support for various types of workloads, including standard Kubernetes Services and Knative Serving Services.
 
 Knative Eventing uses standard HTTP POST requests to send and receive events between event producers and sinks. These events conform to the [CloudEvents specifications](https://cloudevents.io/){target=_blank}, which enables creating, parsing, sending, and receiving events in any programming language.

mkdocs.yml

@@ -30,7 +30,11 @@ markdown_extensions:
       emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - attr_list
   - meta
-  - pymdownx.superfences
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
   - pymdownx.tabbed:
       alternate_style: true
   - pymdownx.details
@@ -54,10 +58,11 @@ plugins:
     separator: '[\/\s\-\.]+'
   exclude:
     glob:
-      # Exclude files that contain hugo specific shortcodes
-      # (either the include shortcode or not-converted-yet tabs).
+      # Exclude files that are built into other parts of the documentation
       - snippets/*
       - smoketest.md
+  # This could be used to generate nav from the directory structure.
+  # It is currently disabled by the `nav` field in `config/nav.yml`.
   awesome-pages:
     filename: ".index"
     collapse_single_pages: true