Mermaid markdown documentation & visualization enhancement (#4170)

I added the missing documentation for how to use Mermaid in the Markdown
component.

While doing so I realized that there is a display error, showing the
mermaid diagrams source code for about half a second whenever a page is
refreshed containing the markdown component using mermaid:

If you run this application

``````python
from nicegui import ui

@ui.page('/')
def main():
    with ui.grid(columns=2):
        with ui.card():
            ui.markdown('''### Architecture Overview
  ```mermaid
  flowchart TB
      subgraph Frontend
          Browser[Browser/Client]
          Vue[Vue.js Components]
      end
      subgraph Backend
          Server[NiceGUI Server]
          Python[Python Handlers]
      end
      Browser <--> Vue
      Vue <-.->|WebSocket| Server
      Server <--> Python
  ```
  
  ### State Diagram
  
  ```mermaid
  stateDiagram-v2
      [*] --> Init: Start App
      Init --> Ready: Load UI
      Ready --> Processing: Event
      Processing --> Ready: Update UI
      Processing --> Error: Exception
      Error --> Ready: Handle Error
      Ready --> [*]: Close
  ```
  ''', extras=['mermaid'])

ui.run()
``````

~~Making use of Mermaids data-processed attribute and waiting for the
graphs being rendered seemes to resolve this issue.~~ Update: This
solution has been replaced by PR #4722.

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

website/documentation/content/markdown_documentation.py

@@ -55,6 +55,23 @@ def markdown_tables():
     ''', extras=['tables'])
 
 
+@doc.demo('Mermaid diagrams', '''
+    You can use Mermaid diagrams with the "mermaid" extra.
+    See the [markdown2 documentation](https://github.com/trentm/python-markdown2/wiki/Extras#implemented-extras)
+    for a list of available extras.
+''')
+def mermaid():
+    ui.markdown('''
+        ```mermaid
+        graph TD;
+            A-->B;
+            A-->C;
+            B-->D;
+            C-->D;
+        ```
+    ''', extras=['mermaid'])
+
+
 @doc.demo('LaTeX formulas', '''
     By activating the "latex" extra, you can use LaTeX formulas.
     This requires markdown2 version >=2.5 as well as latex2mathml to be installed.