전체 다이어그램으로 돌아가기

타임라인

시간 축을 따라 연대순 이벤트와 마일스톤을 시각화합니다. 프로젝트 히스토리와 로드맵에 적합합니다.

타임라인이란?

타임라인 다이어그램은 시간 축을 따라 연대순으로 이벤트를 제시하여 이벤트 간의 순서와 관계를 쉽게 볼 수 있게 합니다. 프로젝트 계획, 역사적 문서화, 제품 로드맵 및 시간적 관계를 이해하는 것이 중요한 모든 시나리오에 필수적입니다. 타임라인은 시간에 따른 이벤트의 명확하고 선형적인 내러티브를 제공합니다.

편집 및 미리보기

Mermaid 문법으로 타임라인을(를) 작성하고 변경 사항을 즉시 확인하세요.

에디터
100%

Example

Timeline example

A Mermaid timeline showing when example code, PNG previews, and alt text are added.

Mermaid timeline example showing example code, PNG preview, alt text, and publishing milestones
Mermaid timeline example showing example code, PNG preview, alt text, and publishing milestones

Mermaid code

timeline
    title Mermaid Editor Release Timeline
    2026-05-01 : Add example code
               : Render PNG preview
    2026-05-03 : Add image alt text
               : Improve SEO content
    2026-05-05 : Publish pages

일반적인 사용 사례

제품 로드맵

타임라인을 따라 계획된 기능, 릴리스, 마일스톤을 시각화합니다. 이해관계자와 팀원에게 개발 우선순위를 전달합니다.

프로젝트 마일스톤

주요 프로젝트 이벤트, 결과물, 마감일을 추적합니다. 프로젝트 진행 상황과 다가오는 마일스톤의 명확한 개요를 제공합니다.

역사적 문서화

회사 역사, 기술 발전 또는 모든 연대기적 스토리를 제시합니다. 시간에 따른 이벤트의 매력적인 시각적 내러티브를 만듭니다.

릴리스 노트

소프트웨어 버전과 주요 기능을 연대순으로 문서화합니다. 사용자가 제품의 발전을 이해하도록 돕습니다.

주요 기능

기간

날짜, 분기 또는 사용자 정의 텍스트와 같은 레이블로 기간을 정의하여 이벤트를 연대순으로 구성합니다.

기간당 여러 이벤트

동일한 기간 아래 여러 이벤트를 그룹화하여 동시 활동이나 관련 항목을 보여줍니다.

제목 및 섹션

전체 제목과 섹션 헤더를 추가하여 컨텍스트를 제공하고 타임라인을 논리적 그룹으로 구성합니다.

자동 레이아웃

Mermaid가 최적의 가독성을 위해 타임라인을 따라 이벤트를 자동으로 배치하고 배열합니다.

모범 사례

일관된 시간 척도 사용

타임라인 전체에서 시간 간격을 일관되게 유지합니다. 명확하게 표시하지 않는 한 일과 년을 혼합하지 마세요.

핵심 이벤트 강조

가장 중요한 마일스톤을 강조합니다. 모든 이벤트가 동일한 시각적 비중을 가질 필요는 없습니다.

레이블을 간결하게 유지

이벤트에 짧고 설명적인 레이블을 사용합니다. 세부사항은 관련 문서에서 제공할 수 있습니다.

관련 이벤트 그룹화

섹션을 사용하여 관련 이벤트를 함께 그룹화하면 주제와 단계를 더 쉽게 이해할 수 있습니다.

다른 다이어그램 유형 살펴보기

순서도

노드와 방향 화살표로 프로세스, 워크플로, 알고리즘을 시각화합니다. 비즈니스 프로세스와 의사결정 트리에 적합합니다.

시퀀스 다이어그램

시간에 따른 액터 또는 시스템 간의 상호작용을 문서화합니다. API 문서화와 시스템 설계에 이상적입니다.

클래스 다이어그램

클래스, 속성, 관계로 객체지향 시스템을 모델링합니다. 소프트웨어 아키텍처 설계에 필수적입니다.

상태 다이어그램

시스템이나 애플리케이션의 상태 전이를 표현합니다. 라이프사이클 상태와 워크플로 모델링에 적합합니다.

간트 차트

작업과 종속성으로 프로젝트 타임라인을 계획하고 추적합니다. 프로젝트 관리와 일정 관리에 완벽합니다.

ER 다이어그램

엔티티와 관계로 데이터베이스 스키마를 설계합니다. 데이터베이스 모델링과 문서화에 이상적입니다.

사용자 여정

터치포인트 전반에 걸친 사용자 경험과 상호작용을 매핑합니다. UX 설계와 고객 여정 매핑에 탁월합니다.

Git 그래프

Git 브랜치 전략과 커밋 히스토리를 시각화합니다. 버전 관리 워크플로 설명에 유용합니다.

마인드맵

아이디어를 정리하고, 개념을 브레인스토밍하며, 계층적 시각 구조를 만듭니다. 기획과 지식 매핑에 완벽합니다.

파이 차트

원형 차트로 비율 데이터 분포를 표시합니다. 백분율과 시장 점유율 분석에 이상적입니다.

칸반 보드

워크플로 단계를 나타내는 열에 작업을 정리합니다. 애자일 프로젝트 관리와 작업 추적에 완벽합니다.

사분면 차트

두 축 그리드에 항목을 배치하여 비교하고 우선순위를 정합니다. 기능 우선순위 설정과 전략 분석에 이상적입니다.

생키 다이어그램

비례 화살표로 노드 간 흐름량을 시각화합니다. 에너지 흐름, 예산 배분, 전환 퍼널에 완벽합니다.

XY 차트

사용자 정의 가능한 축으로 막대 차트와 라인 차트를 만듭니다. 데이터 시각화와 트렌드 분석에 이상적입니다.

블록 다이어그램

열과 행으로 배열된 블록으로 구조화된 레이아웃을 만듭니다. 시스템 아키텍처와 구성 요소 개요에 적합합니다.

아키텍처 다이어그램

서비스 아이콘과 연결로 클라우드 및 시스템 아키텍처를 설계합니다. 인프라 문서화에 완벽합니다.

패킷 다이어그램

비트 수준 필드 레이아웃으로 네트워크 프로토콜 패킷 구조를 시각화합니다. 네트워크 프로토콜 문서화에 필수적입니다.