Improve Mermaid Chart Data

Author: iamfaran

client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx

@@ -10,11 +10,98 @@ import {
 
 import Mermaid from "./mermaid";
 
+// Collection of example mermaid diagrams that showcase different diagram types
+const mermaidExamples = {
+  flowchart: 
+`flowchart TD
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    D --> E[Check Documentation]
+    E --> B
+    C --> F[Deploy]`,
+
+  sequence: 
+`sequenceDiagram
+    participant User
+    participant App
+    participant API
+    participant DB
+    
+    User->>App: Submit Form
+    App->>API: Send Request
+    API->>DB: Query Data
+    DB->>API: Return Result
+    API->>App: Send Response
+    App->>User: Show Result`,
+
+  classDiagram: 
+`classDiagram
+    class User {
+      +String name
+      +String email
+      +authenticate()
+      +updateProfile()
+    }
+    class Product {
+      +String name
+      +Number price
+      +getDetails()
+    }
+    class Order {
+      +Date date
+      +Number total
+      +process()
+    }
+    User "1" --> "*" Order
+    Order "*" --> "*" Product`,
+
+  gantt: 
+`gantt
+    title Project Timeline
+    dateFormat  YYYY-MM-DD
+    
+    section Planning
+    Research           :done, a1, 2023-01-01, 10d
+    Requirements       :active, a2, after a1, 7d
+    
+    section Development
+    Design             :a3, after a2, 8d
+    Implementation     :a4, after a3, 14d
+    Testing            :a5, after a4, 7d
+    
+    section Deployment
+    Release            :milestone, after a5, 0d`,
+
+  entityRelationship: 
+`erDiagram
+    CUSTOMER }|--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    CUSTOMER ||--o{ PAYMENT : makes
+    PRODUCT ||--|{ ORDER_ITEM : "ordered in"`,
+
+  journey: 
+`journey
+    title User Purchase Journey
+    section Visit Website
+      Homepage: 5: User
+      Product listing: 4: User
+      Product detail: 3: User
+    section Purchase
+      Add to cart: 4: User
+      Checkout: 3: User, Admin
+      Payment: 3: User, Admin
+    section Post-Purchase
+      Order confirmation: 5: User, Admin
+      Shipping: 4: Admin
+      Delivery: 5: User, Admin`
+};
+
+// Using the flowchart example as default
 const childrenMap = {
   code: stringExposingStateControl(
     "code",
-    `graph LR
-   Start --> Stop`
+    mermaidExamples.flowchart
   ),
   onEvent: eventHandlerControl([
     {