Examples & Syntax Reference

**Bold text** and *italic text* and ~~strikethrough~~
 
***Bold and italic*** combined
 
`Inline code` for short snippets

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

- Item 1
- Item 2
  - Nested item 2.1
  - Nested item 2.2
- Item 3

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item

- [x] Completed task
- [x] Another completed task
- [ ] Pending task
- [ ] Another pending task

> This is a blockquote.
>
> It can span multiple lines.
>
> > And can be nested.

[Link to Mendix](https://www.mendix.com)
 
[Link with title](https://www.mendix.com "Mendix Homepage")

https://www.mendix.com

| Feature | Supported | Notes |
|---------|:---------:|-------|
| GFM Tables | Yes | Full support |
| Alignment | Yes | Left, center, right |
| Mermaid | Yes | All diagram types |

```javascript
// JavaScript code with syntax highlighting
function greet(name) {
    console.log(`Hello, ${name}!`);
}
```

```python
# Python code
def greet(name):
    print(f"Hello, {name}!")
```

```sql
-- SQL query
SELECT * FROM users WHERE active = true;
```

Here is a footnote reference[^1].
 
[^1]: This is the footnote content.

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
```

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database
 
    User->>Browser: Click button
    Browser->>Server: HTTP Request
    Server->>Database: Query data
    Database-->>Server: Return results
    Server-->>Browser: JSON Response
    Browser-->>User: Display data
```

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review : Submit
    Review --> Approved : Approve
    Review --> Draft : Reject
    Approved --> Published : Publish
    Published --> [*]
```

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        string name
        string email
        int customerNumber
    }
    ORDER {
        int orderNumber
        date created
        string status
    }
    LINE_ITEM {
        string productCode
        int quantity
        float price
    }
```

```mermaid
%%{init: {'theme': 'dark', 'themeVariables': {
    'fontSize': '16px',
    'sectionFontSize': '14px',
    'taskBkgColor': '#2d3748',
    'taskTextColor': '#ffffff',
    'taskTextLightColor': '#1a202c',
    'doneTaskBkgColor': '#1a365d',
    'doneTaskBorderColor': '#63b3ed',
    'activeTaskBkgColor': '#2c5282',
    'activeTaskBorderColor': '#90cdf4',
    'critBkgColor': '#742a2a',
    'critBorderColor': '#fc8181',
    'gridColor': '#4a5568',
    'todayLineColor': '#f56565',
    'sectionBkgColor': '#1a202c',
    'altSectionBkgColor': '#2d3748'
}}}%%
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Requirements    :done, a1, 2024-01-01, 7d
        Design          :done, a2, after a1, 14d
    section Development
        Backend         :active, b1, after a2, 21d
        Frontend        :crit, b2, after a2, 21d
    section Testing
        QA Testing      :c1, after b1, 14d
        UAT             :milestone, after c1, 0d
```

```mermaid
pie title Technology Stack
    "React" : 35
    "TypeScript" : 25
    "Python" : 20
    "SQL" : 15
    "Other" : 5
```

```mermaid
journey
    title User Onboarding Journey
    section Sign Up
        Visit website: 5: User
        Fill registration form: 3: User
        Verify email: 4: User
    section First Use
        Complete profile: 4: User
        Watch tutorial: 3: User
        Create first project: 5: User
```

```mermaid
%%{init: {'theme': 'dark'}}%%
mindmap
    root((Mendix Platform))
        (Development)
            [Low-Code]
            [Visual Modeling]
            [Microflows]
        (Deployment)
            )Cloud(
            )On-Premise(
            )Hybrid(
        (Integration)
            {{REST APIs}}
            {{OData}}
            {{Connectors}}
```

```mermaid
%%{init: {'theme': 'dark', 'themeVariables': { 'cScale0': '#0e639c', 'cScale1': '#4ec9b0', 'cScale2': '#ce9178', 'cScale3': '#dcdcaa', 'cScale4': '#c586c0', 'cScale5': '#9cdcfe' }}}%%
timeline
    title Mendix Release History
    section Early Days
        2005 : Company Founded
        2010 : First Major Release
    section Growth
        2015 : Cloud Platform Launch
        2018 : Siemens Acquisition
    section Innovation
        2020 : Low-Code Revolution
        2024 : AI Integration
```

```mermaid
quadrantChart
    title Technology Evaluation
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan for future
    quadrant-2 Invest heavily
    quadrant-3 Avoid
    quadrant-4 Quick wins
    React: [0.8, 0.9]
    Vue: [0.6, 0.7]
    Angular: [0.7, 0.6]
    Svelte: [0.4, 0.5]
```

```mermaid
requirementDiagram
 
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
 
element test_entity {
type: simulation
}
 
test_entity - satisfies -> test_req
```

```mermaid
sankey-beta
 
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
```

```mermaid
xychart-beta
    title "Monthly Sales 2024"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue (thousands)" 0 --> 100
    bar [30, 45, 60, 55, 70, 85]
    line [25, 40, 55, 50, 65, 80]
```

```mermaid
block-beta
    columns 3
 
    Frontend["Frontend\nReact + TypeScript"]
    API["API Gateway"]
    Backend["Backend\nPython + FastAPI"]
 
    Frontend --> API
    API --> Backend
```

```mermaid
architecture-beta
    group cloud(cloud)[Cloud Platform]
 
    service api(server)[API Server] in cloud
    service db(database)[Database] in cloud
    service cache(disk)[Cache] in cloud
    service cdn(internet)[CDN] in cloud
 
    api:R -- L:db
    api:B -- T:cache
    cdn:R -- L:api
```

```mermaid
kanban
    Todo
        task1[Design UI]
        task2[Setup Database]
    In Progress
        task3[Implement API]
    Review
        task4[Code Review]
    Done
        task5[Documentation]
```