Quartz 4

markdown-examples

4 min read

Markdown 表格与图形化用法示例

表格用法

基础表格

序号项目名称完成状态优先级备注
1设计页面布局✅高已完成
2实现响应式设计🔄高进行中
3优化移动端体验❌中待开始
4添加图形化组件❌低计划中

对齐方式表格

左对齐居中对齐右对齐
内容A内容B内容C
数据1数据2数据3
项目X项目Y项目Z

图形化用法

流程图 (Flowchart)

graph TD
    A[开始项目] --> B{选择技术栈}
    B -->|VitePress| C[搭建文档站点]
    B -->|React| D[构建前端应用]
    C --> E[设计页面布局]
    D --> E
    E --> F[实现响应式设计]
    F --> G[优化移动端体验]
    G --> H[完成部署]
    H --> I[项目结束]

时序图 (Sequence Diagram)

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库

    用户->>浏览器: 访问网站
    浏览器->>服务器: 请求页面
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回数据
    服务器-->>浏览器: 返回页面
    浏览器-->>用户: 显示页面

甘特图 (Gantt Chart)

gantt
    title 项目开发时间线
    dateFormat  YYYY-MM-DD
    section 设计阶段
    页面设计 :done, des1, 2025-01-01, 2025-01-10
    UI组件 :active, des2, 2025-01-05, 2025-01-15
    section 开发阶段
    前端开发 :dev1, 2025-01-10, 2025-02-10
    后端开发 :dev2, 2025-01-15, 2025-02-15
    section 测试阶段
    功能测试 :test1, 2025-02-10, 2025-02-20
    性能测试 :test2, 2025-02-15, 2025-02-25

类图 (Class Diagram)

classDiagram
    class 用户 {
        +String 用户名
        +String 邮箱
        +登录()
        +注册()
    }
    
    class 文档 {
        +String 标题
        +String 内容
        +Date 创建时间
        +创建()
        +编辑()
        +删除()
    }
    
    class 站点 {
        +String 站点名
        +String 域名
        +发布()
        +部署()
    }
    
    用户 "1" -- "*" 文档 : 创建
    站点 "1" -- "*" 文档 : 包含

状态图 (State Diagram)

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中 : 提交审核
    审核中 --> 已发布 : 审核通过
    审核中 --> 草稿 : 审核不通过
    已发布 --> 已归档 : 文档过期
    已归档 --> [*] : 删除

饼图 (Pie Chart)

pie title 技术栈使用比例
    "HTML/CSS" : 35
    "JavaScript" : 25
    "VitePress" : 20
    "Mermaid" : 10
    "其他" : 10

关系图 (Entity Relationship Diagram)

erDiagram
    用户 ||--o{ 文档 : 创建
    文档 ||--|| 站点 : 所属
    站点 ||--o{ 访问记录 : 访问
    用户 ||--o| 访问记录 : 产生

综合示例：项目管理流程

以下是一个结合表格和图形的综合示例：

项目进度表

阶段任务负责人预计完成时间状态
设计页面设计张三2025-01-10✅
开发前端开发李四2025-02-10🔄
开发后端开发王五2025-02-15🔄
测试功能测试赵六2025-02-20❌

项目流程图

graph LR
    A[项目启动] --> B[需求分析]
    B --> C[系统设计]
    C --> D[前端开发]
    C --> E[后端开发]
    D --> F[接口联调]
    E --> F
    F --> G[系统测试]
    G --> H[部署上线]
    H --> I[项目完成]
    
    style A fill:#e1f5fe
    style I fill:#e8f5e8

这些示例展示了 Markdown 中表格和图形化元素的用法，可以用于创建清晰、直观的文档内容。

Graph View