用kimi和claude自动生成时间轴图表

做时间轴图表并不难，但是很麻烦，先要大量收集相关事件，然后在一些图表软件中反复调整操作。现在借助AI工具，可以自动生成了。

首先，在kimi中输入提示词来获取某个企业的大事记：

联网检索，元语智能chatYuan这个公司的大事记

以下是kimi的回复：

根据搜索结果，元语智能ChatYuan的大事记如下：

2022年10月1日，元语智能发布了PromptCLUE1.0模型和API，这是首个中文支持的零样本开源模型。

2022年11月，发布了PromptCLUE1.5模型和API，这个版本支持更多任务的零样本开源模型。

2022年12月20日，元语智能发布了ChatYuan，这是国内首个基于百亿参数大模型的功能对话产品，支持小程序和网页。

2023年1月12日，元语智能发布了ChatYuan大模型，这是首个功能对话开源模型供免费下载，全平台已有数万下载量。

2023年2月3日，元语智能发布了ChatYuan API，可供API调用的功能对话模型。

2023年2月22日，元语智能对ChatYuan进行了升级，支持中英双语交互、多次编辑、上下文关联交互、模拟情景设定等多种新功能。

可以看到是比较完整的，然后可以根据企业微信公众号等渠道再稍微添加一些事件，就很完整了。

接下来，将以上大事记复制到claude中，然后加上一段提示词：根据以上内容，用react创建一个竖向的时间轴图表，要紧凑一些，不用滚动下拉即可在一屏中看见，字体加粗，要有设计感一些，时间要显示成年月日，标题是：元语智能大事记

claude很快生成图表：

还可以查看源代码：

import React from 'react';

import { Card, CardContent } from '@/components/ui/card';

const timelineData = [

{ date: '2022-10-01', event: 'PromptCLUE1.0模型' },

{ date: '2022-11-01', event: 'PromptCLUE1.5模型' },

{ date: '2022-12-20', event: 'ChatYuan发布' },

{ date: '2023-01-12', event: 'ChatYuan大模型开源' },

{ date: '2023-02-03', event: 'API发布' },

{ date: '2023-02-09', event: '小程序打不开' },

{ date: '2023-02-22', event: 'ChatYuan升级' },

{ date: '2023-03-24', event: '支持手机' },

{ date: '2023-03-30', event: '入选AIGC50' },

{ date: '2023-04-03', event: '与外研在线合作' },

{ date: '2023-04-18', event: '升级版本发布' },

{ date: '2023-04-21', event: 'KnowX1.0发布' },

{ date: '2023-04-27', event: '入选AI创新企业TOP20' },

{ date: '2023-08-28', event: '公众号最后更新' },

];

const TimelineItem = ({ date, event, isLast }) => (

<div className="flex items-start mb-3 relative">

<div className="flex flex-col items-center mr-4">

<div className="w-3 h-3 bg-blue-500 rounded-full z-10"></div>

{!isLast && <div className="w-0.5 h-full bg-blue-200 absolute top-3 left-1"></div>}

</div>

<div className="flex-1">

<p className="text-xs font-bold text-blue-600 mb-1">{date}</p>

<p className="text-sm font-semibold">{event}</p>

</div>

</div>

);

const VerticalTimeline = () => {

return (

<Card className="max-w-md mx-auto h-screen flex flex-col bg-gradient-to-b from-blue-50 to-white">

<CardContent className="p-6 flex-grow overflow-hidden">

<h2 className="text-2xl font-extrabold mb-4 text-center text-blue-800">元语智能大事记</h2>

<div className="overflow-y-auto h-full pr-2 space-y-1">

{timelineData.map((item, index) => (

<TimelineItem

key={index}

date={item.date}

event={item.event}

isLast={index === timelineData.length - 1}

/>

))}

</div>

</CardContent>

</Card>

);

};

export default VerticalTimeline;