Marp & Mermaid Diagram Test

Test various types of Mermaid diagrams

Youqing Han
DevOps Engineer

Testing Mermaid integration in Marp

Agenda

Supported Diagram Types

  • Flowchart
  • Architecture Diagram
  • Sequence Diagram
  • Class Diagram
  • Gantt Chart
  • Pie Chart
  • Git Workflow

Flowchart Test

Simple Flowchart

graph TD A[Start] --> B{Decision} B -->|Yes| C[Execute Action 1] B -->|No| D[Execute Action 2] C --> E[End] D --> E

Architecture Diagram Test

System Architecture Diagram

graph TB subgraph "User Layer" U1[User 1] U2[User 2] end subgraph "Application Layer" A1[Web Application] A2[API Service] end subgraph "Data Layer" D1[Database] D2[Cache] end U1 --> A1 U2 --> A1 A1 --> A2 A2 --> D1 A2 --> D2

Sequence Diagram Test

Sequence Diagram

sequenceDiagram participant U as User participant W as Web Server participant A as API Server participant D as Database U->>W: Send Request W->>A: Forward Request A->>D: Query Data D-->>A: Return Results A-->>W: Return Response W-->>U: Return Page

Class Diagram Test

Class Diagram

classDiagram class User { +String name +String email +login() +logout() } class Admin { +String role +manageUsers() +viewReports() } User <|-- Admin

Gantt Chart Test

Project Gantt Chart

gantt title Project Development Plan dateFormat YYYY-MM-DD section Design Phase Requirements Analysis :done, des1, 2024-01-01,2024-01-07 System Design :done, des2, 2024-01-08, 2024-01-14 section Development Phase Frontend Development :active, dev1, 2024-01-15, 2024-02-15 Backend Development : dev2, 2024-01-20, 2024-02-20 section Testing Phase Unit Testing : test1, 2024-02-21, 2024-02-28 Integration Testing : test2, 2024-03-01, 2024-03-07

Pie Chart Test

Pie Chart

pie title Technology Stack Usage "JavaScript" : 35 "Python" : 25 "Java" : 20 "Go" : 15 "Others" : 5

Git Workflow Test

Git Workflow Diagram

graph TD A[Initial Commit] --> B[Create develop branch] B --> C[Feature 1 commit] C --> D[Feature 2 commit] D --> E[Merge to main] E --> F[Release v1.0] style A fill:#e1f5fe style F fill:#c8e6c9 style E fill:#fff3e0

Test Complete

Test Complete!

All Mermaid diagram types have been tested

Youqing Han
DevOps Engineer

Mermaid works perfectly in Marp!

1 / 10
Back to Slides
hanyouqing.com