템플릿
다이어그램 템플릿
바로 사용할 수 있는 Mermaid 다이어그램 템플릿. 템플릿을 클릭하여 에디터에 로드하고 필요에 맞게 커스터마이즈하세요.
템플릿 21개
API Request Flow
소프트웨어 엔지니어링sequenceDiagram
participant Client
participant Gateway as API Gateway
participant Auth
participant Service
participant DB
Client->>Gateway: POST /api/data
Gateway->>Auth: Validate Token
Auth-->>Gateway: Valid
Gateway->>Service: Forward Request
Service->>DB: Query
DB-->>Service: Results
Service-->>Gateway: Response
Gateway-->>Client: 200 OKMicroservices Architecture
소프트웨어 엔지니어링graph TB
LB[Load Balancer] --> GW[API Gateway]
GW --> US[User Service]
GW --> PS[Product Service]
GW --> OS[Order Service]
US --> UDB[(User DB)]
PS --> PDB[(Product DB)]
OS --> ODB[(Order DB)]
OS --> MQ{{Message Queue}}
MQ --> NS[Notification Service]Class Inheritance
소프트웨어 엔지니어링classDiagram
class Shape {
<<abstract>>
+String color
+area() double
+draw() void
}
class Circle {
+double radius
+area() double
}
class Rectangle {
+double width
+double height
+area() double
}
Shape <|-- Circle
Shape <|-- RectangleApplication State Machine
소프트웨어 엔지니어링stateDiagram-v2
[*] --> Idle
Idle --> Loading: fetch
Loading --> Success: resolve
Loading --> Error: reject
Success --> Idle: reset
Error --> Loading: retry
Error --> Idle: dismissBlog Database Schema
소프트웨어 엔지니어링erDiagram
USER ||--o{ POST : writes
USER ||--o{ COMMENT : makes
POST ||--|{ COMMENT : has
POST }o--o{ TAG : tagged
USER {
int id PK
string username
string email
datetime created_at
}
POST {
int id PK
string title
text content
int author_id FK
datetime published_at
}Git Feature Branch Workflow
소프트웨어 엔지니어링gitGraph
commit id: "init"
branch develop
commit id: "dev setup"
branch feature/auth
commit id: "add login"
commit id: "add signup"
checkout develop
merge feature/auth
branch feature/dashboard
commit id: "add charts"
checkout develop
merge feature/dashboard
checkout main
merge develop tag: "v1.0"Sprint Kanban Board
비즈니스 및 관리kanban
Backlog
User authentication
Payment integration
Email notifications
In Progress
Dashboard redesign
API optimization
Review
Search feature
Done
Database migration
CI/CD setupProject Timeline
비즈니스 및 관리gantt
title Product Launch Plan
dateFormat YYYY-MM-DD
section Research
Market Analysis :done, r1, 2024-01-01, 14d
User Interviews :done, r2, after r1, 10d
section Design
Wireframes :active, d1, after r2, 10d
Prototypes :d2, after d1, 14d
section Development
MVP Build :dev1, after d2, 30d
Testing :test1, after dev1, 14d
section Launch
Beta Release :milestone, after test1, 0d
Marketing :m1, after test1, 14dQuarterly Roadmap
비즈니스 및 관리timeline
title 2024 Product Roadmap
Q1 2024 : Core Platform
: User Authentication
: Basic Dashboard
Q2 2024 : API v2 Launch
: Mobile App Beta
: Analytics Integration
Q3 2024 : Enterprise Features
: SSO Support
: Advanced Reporting
Q4 2024 : Global Launch
: Multi-region Deploy
: Performance OptimizationDecision Process
비즈니스 및 관리graph TD
A[New Feature Request] --> B{Aligns with roadmap?}
B -->|Yes| C{Resource available?}
B -->|No| D[Add to backlog]
C -->|Yes| E{Effort estimate}
C -->|No| F[Schedule for next quarter]
E -->|< 1 week| G[Fast track]
E -->|1-4 weeks| H[Sprint planning]
E -->|> 4 weeks| I[Epic breakdown]
G --> J[Implement]
H --> J
I --> JE-Commerce Customer Journey
비즈니스 및 관리journey
title E-Commerce Purchase Journey
section Discovery
Search product: 4: Customer
Browse catalog: 3: Customer
Read reviews: 4: Customer
section Purchase
Add to cart: 4: Customer
Enter shipping: 2: Customer
Payment: 3: Customer
section Post-Purchase
Order confirmation: 5: Customer
Track delivery: 4: Customer
Receive product: 5: CustomerRevenue Breakdown
데이터 및 분석pie title Revenue by Product Line
"SaaS Subscriptions" : 45
"Professional Services" : 25
"Enterprise Licenses" : 20
"Training & Certification" : 10Monthly Metrics Dashboard
데이터 및 분석xychart-beta
title "Monthly Active Users (2024)"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Users (thousands)" 0 --> 500
bar [120, 150, 180, 210, 250, 280, 310, 340, 360, 390, 420, 450]
line [120, 150, 180, 210, 250, 280, 310, 340, 360, 390, 420, 450]User Conversion Funnel
데이터 및 분석sankey-beta Website Visitors,Sign Up Page,60 Website Visitors,Bounce,40 Sign Up Page,Registered,35 Sign Up Page,Abandoned,25 Registered,Free Trial,30 Registered,Inactive,5 Free Trial,Paid Subscription,20 Free Trial,Churned,10
Feature Priority Matrix
데이터 및 분석quadrantChart
title Feature Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Plan Carefully
quadrant-2 Do First
quadrant-3 Quick Wins
quadrant-4 Deprioritize
Dark Mode: [0.2, 0.4]
SSO Integration: [0.7, 0.9]
Search Autocomplete: [0.3, 0.8]
Logo Redesign: [0.1, 0.1]
API v2: [0.8, 0.7]
Mobile App: [0.9, 0.8]
Bug Fixes: [0.2, 0.6]Course Structure Mindmap
교육mindmap
root((Web Development))
Frontend
HTML & CSS
Layouts
Responsive Design
JavaScript
ES6+
TypeScript
Frameworks
React
Vue
Backend
Node.js
Python
Databases
SQL
NoSQL
DevOps
Git
Docker
CI/CDLearning Path
교육graph LR
A[Beginner] --> B[HTML & CSS]
B --> C[JavaScript Basics]
C --> D{Choose Path}
D --> E[Frontend: React]
D --> F[Backend: Node.js]
E --> G[State Management]
F --> H[Databases]
G --> I[Full Stack]
H --> I
I --> J[Deploy & DevOps]Study Topic Map
교육mindmap
root((Data Science))
Mathematics
Statistics
Linear Algebra
Calculus
Programming
Python
R
SQL
Machine Learning
Supervised
Unsupervised
Deep Learning
Tools
Jupyter
Pandas
Scikit-learnCI/CD Pipeline
DevOps 및 인프라graph LR
A[Push Code] --> B[Build]
B --> C[Unit Tests]
C --> D{Tests Pass?}
D -->|Yes| E[Integration Tests]
D -->|No| F[Notify Developer]
E --> G{All Pass?}
G -->|Yes| H[Deploy to Staging]
G -->|No| F
H --> I[E2E Tests]
I --> J{Approved?}
J -->|Yes| K[Deploy to Production]
J -->|No| FCloud Architecture
DevOps 및 인프라architecture-beta
group vpc(cloud)[VPC]
group public(cloud)[Public Subnet] in vpc
group private(cloud)[Private Subnet] in vpc
service cdn(internet)[CDN]
service lb(server)[Load Balancer] in public
service app(server)[App Servers] in private
service db(database)[Database] in private
service cache(database)[Cache] in private
cdn:R --> L:lb
lb:R --> L:app
app:R --> L:db
app:B --> T:cacheTCP Packet Structure
DevOps 및 인프라packet-beta 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Offset" 100-105: "Reserved" 106-111: "Flags" 112-127: "Window Size" 128-143: "Checksum" 144-159: "Urgent Pointer"