Mermaid markdown documentation & visualization enhancement

[Alyxion]

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

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.