如何用Typora画甘特图

假设你是一个悲催的研究生,组里突然来了个项目让你画一个甘特图,但是在此之前你连甘特图是什么都不知道,那么,此时的你应该如何是好......

那当然是用支持画图的大模型帮我画图

本文章将会总结一下怎么用Typora画一个简单并且效果不错的甘特图,这里用到的Typora为1.9.5版本,没有安装Typora的可以按照b站的视频去试试,我找的这个:点此跳转。

叠甲,因为我也是初学者,所以可能有些高级用法没用上,见谅。

PS:实际过程中我发现,不下载Typora其实也可以,因为DEEPSEEK就能直接运行这个代码,直接把完成了的代码贴上去让它输出图就好。

1.甘特图是什么

甘特图是一种项目管理的条形图工具,用于直观展示项目的时间安排与进度,给出一个例子:

2.Typora的设置

这里的Typora是1.9.5版本,在画甘特图前,需要保证"文件→偏好设置→Markdown→Markdown扩展语法→图表(序列图、流程图和Mermaid图)"已经被勾选,如下图所示:

3.模板

Typora新建一个文件,先输入"```mermaid"然后回车,把Mermaid代码块标记打出来,然后把然后把下面的代码粘贴到这个代码块中。

bash 复制代码
%% "barHeight"调整一个bar的高度,"barGap"调整bar之间的间距
%% "{left/right}Padding"调整左右预留的宽度
%% "fontSize"调整bar内字体的大小,"sectionFontSize"调整标题字体大小
%% .tick text里的font-size控制坐标轴日期文字大小
%% text.titleText里的font-size控制大标题文字大小
%% "theme"调整表的风格,内置主题有"default","neutral","dark","forest","base"五个选项
%%{init: {
  "gantt": {
    "barHeight": 30,
    "barGap": 4,
    "leftPadding": 100,
    "rightPadding": 20,
    "fontSize": 14,
    "sectionFontSize": 16,
    "theme": "default"
  },
  "themeCSS": "g.tick text,.tick text{font-size:20px !important;}text.titleText{font-size:32px !important;}"
}}%%

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    %% 这个控制是否标记当天的日期,开启会在当天日期上出现一条红色竖线
    todayMarker off
    
    section 产品设计
    %% 可以用"起始时间,结束时间",也可以用"起始时间,持续天数",两者等价
    %%市场调研     :des1, 2024-01-01, 2024-01-11
    市场调研     :des1, 2024-01-01, 10d
    
    产品规划     :des2, after des1, 7d
    原型设计     :des3, after des2, 6d
    
    section 技术研发
    技术选型     :tech1, after des3, 6d
    架构设计     :tech2, after tech1, 7d
    核心开发     :tech3, after tech2, 21d
    性能优化     :tech4, after tech3, 6d
    
    section 质量保障
    测试计划     :qa1, after tech2, 6d
    测试执行     :qa2, after tech3, 10d
    验收测试     :qa3, after qa2, 6d

接下来调整参数,达到满意的情况即可,如果有些设置,比如字体颜色之类的,这个模板里没有,可以让大模型帮你修改添加一些参数。

最后的效果如下图所示:
01/07 01/14 01/21 01/28 02/04 02/11 02/18 02/25 03/03 03/10 市场调研 产品规划 原型设计 技术选型 架构设计 核心开发 测试计划 性能优化 测试执行 验收测试 产品设计 技术研发 质量保障 项目计划

相关推荐
竹之却3 天前
Typora 添加锚点实现文档内部快速跳转
ai·typora·openclaw
三枪一个麻辣烫10 天前
gemini Adobe Illustrator visio draw.io画图
图像处理·人工智能·甘特图
daols8810 天前
vue甘特图vxe-gantt定位到对应的行于列,定位到对应的任务视图任务条
javascript·vue.js·甘特图
关中老四10 天前
简单易用的vue3甘特图组件:mzgantt-vue3
javascript·vue.js·甘特图
OenAuth.Core12 天前
更快登录、更稳协作、更好导出:最好用的免费甘特图星甘StarGantt V3.3更新说明
甘特图
daols8813 天前
vue甘特图vxe-gantt实现点击任务条弹出编辑表单
前端·vue.js·甘特图·vxe-gantt
关中老四15 天前
【原生JS甘特图MZGantt 】如何给父任务设置独立进度条
前端·javascript·甘特图
夏至xz21 天前
类似 typora 的新一代 Markdown 编辑器
编辑器·typora·markdown·milkup·milkdown
daols8823 天前
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能(含二次确认)
vue.js·甘特图·vxe-gantt
小刘爱搬砖1 个月前
Typora安装教程(激活)
开源·typora·markdown