前端暑期实习面经（网上收集）

这里写自定义目录标题

欢迎使用Markdown编辑器

版本号排序，input= $'1.2.3', '1.2', '2.0' , '1.0'$ , output= $'2.0', '1.2.3' ,'1.2' ,'1.0'$

八股

你为什么选择前端

你觉得AI对你有哪些影响

monorepo有哪些好处？选择的是什么框架？

讲一下你们组件怎么考虑浏览器降级的？

讲一下盒子模型

怎么设置全局的盒子模型

讲三种实现三栏布局的方式

讲一下flex属性由哪三个属性构成，讲一下这三个属性

flex:1 代表什么

讲一下事件循环

讲一下微任务有哪些，宏任务有哪些

V-if 和 v-show 有什么区别，它们底层原理是？

RAF算微任务还是宏任务

vue2和vue3的响应式原理

在vue中数据更新后，怎么进行视图渲染更新？

字节一面面经（二战）

代码题

代码输出

var result = \[\];

var a = 3;

var total = 0;

function foo(a) {

var i = 0;

for (; i < 3; i++) {

result $i$ = function() {

total += i * a;

console.log(total);

}

foo(1);

result0;

result1;

result2;

八股

网页输入URL发生的过程

DNS的解析过程是怎么样的

怎么查找到的本地服务器

TCP和HTTP协议之间的关系

HTTP和HTTPS之间的区别是什么

为啥TLS要区分对称加密和非对称加密

浏览器页面的渲染过程是一个进程还是线程

HTML解析和CSS解析相互阻塞吗，JS线程呢

worker线程怎么和js线程共享内存

MCP和skills区别

agent怎么实现的模型去调用脚本的

怎么约束模型调用外部函数的参数

讲讲模型的temperature和top_p

AI回复流式和非流式有什么区别吗

搜狐畅游一面面经

前端怎么进行性能优化

嵌套数组怎么实现扁平化

讲一下深拷贝

let、const、var的区别

两个异步任务怎么同时获得结果

let、const、var的区别

flex这个属性的含义，设置成100代表什么

vue2和vue3的区别

怎么解决vue2响应式的缺陷

vue怎么监听页面销毁

vuex有几个常用的函数

pinia和vuex两个有什么区别

讲讲父子通信

vue的hook有哪些

常用的UI框架有哪些

vue的全局路由守卫有哪些

百度一面面经

手写题

实现发布订阅模式

实现链表反转

代码输出题

事件循环

八股

讲讲html5的语义化标签

计算元素A和元素B之间的距离，考察margin 坍塌

absolute和relative的区别

讲讲flex布局，容器和子元素有哪些相关的属性

讲讲BFC

讲讲实现动画的方式

讲讲事件循环

讲讲你对状态码的理解

讲讲浏览器的渲染过程

讲讲重排和重绘

讲讲重排和重绘之间的区别

讲讲什么操作会触发重排

讲讲什么是原型链

讲讲什么是闭包

你知道的设计模式有哪些

pnpm和npm的区别

为什么vite的启动比webpack快

说说你对skills的理解

skills和rules的区别是什么

百度三面面经

实习

你做过最有挑战的需求

如果现在再让你来做这个需求，你会怎么解决

mcp和skills有什么区别

流水线利用AI检测代码变更的具体原理是怎么实现的

讲讲你在实习中做的MCP相关的工作

场景题

用AI写一个百度前端搜索页面，你觉得需要注意什么？

怎么实现搜索结果页关键词高亮？

用户输入query后，前端向后端发送请求，你会怎么设计后端返回的字段

假设用户输入多个query，搜索结果页面怎么显示的是用户输入的最后一个query

八股

发送的axios请求，怎么手动进行取消

美团一面面经

项目

讲讲实习过程中你做的比较复杂的一个组件需求

怎么实现日期选择器结束时间不能小于开始时间

讲讲你们实现的这个图片拖拽和放大功能

怎么优化这个拖拽的性能

开发组件需求是怎么利用AI的

讲讲你们这个MCP

怎么实现的响应式布局

讲讲组件开发移动端遇到的困难

讲讲路由懒加载

讲讲怎么采集这些性能指标

讲讲组合式API和选项式API的区别

手写

最长无重复子串

手写HTML------九宫棋实现

腾讯一面面经（一战）

算法题

将字符串进行千分位转换

爬楼梯（动态规划），空间复杂度是否可以进行优化

大数加法

项目

这个SDK项目是怎么进行错误采集的

你这个上报错误机制是怎么做的

讲讲你这个错误重试机制

讲讲你这个请求的降级链是怎么设计的

讲讲你这个用户行为追踪是怎么做的

怎么实现A页面跳转到B页面，A页面采集到的数据包含了B页面采集的数据？

哪些AI产品平时用的多

cursor除了这个AI编码能力还会使用哪些其他功能？

figma插件的底层原理是什么？它是怎么让AI还原设计稿的？

国内哪些大模型用的多？

你自己写过MCP吗？用来解决什么问题

你了解过agent的哪些知识

腾讯一面面经（二战）

项目

讲讲数据上报的三种方法

介绍一下你们这个MCP是干什么的

你在实习中做的有关组件的需求是什么

让你做一个让用户生成组件库的AI平台，你会怎么设计

怎么确保AI生成的组件库，是用户想要的

八股

讲讲原型链

讲讲闭包

怎么防范内存泄漏

讲讲防抖的实现

防抖和节流有什么区别

怎么实现水平垂直居中

讲讲em和rem

vue的生命周期有哪些

讲讲的watch的底层实现原理

介绍状态码有哪些

怎么防御xss攻击

页面出现白屏，怎么查找原因

腾讯一面面经（三战）

手写题

最小覆盖子串变种

题目描述

给定字符串 s 和字典 chars，其中 chars 的键为字符，值为该字符至少需要的个数。请找出 s 中最短的

子串，使得该子串中每个字符的出现次数大于等于 chars 中对应的要求。若不存在满足条件的子串，

返回空字符串 ""。

示例

示例 1：

输入：s = "ADOBECODEBANC", chars = {'A': 1, 'B': 1, 'C': 1}

输出："BANC"

解释：最短子串需包含至少 1 个 A、1 个 B、1 个 C。"BANC" 长度为 4。

示例 2：

输入：s = "a", chars = {'a': 1}

输出："a"

示例 3：

输入：s = "a", chars = {'a': 2}

输出：""

解释：s 中只有 1 个 'a'，无法满足至少 2 个的要求。

约束

1 <= s.length <= 10^5

chars 中的字符均为英文字母

chars 中的值均为正整数

实现指数退避重试的包装函数

题目描述

实现一个高阶函数 withRetry，接收一个异步函数 fn，返回一个新的函数。新函数在调用时会执行

fn，若执行失败则按指数退避策略进行重试，直到成功或达到最大重试次数。

要求

指数退避：第 n 次重试前的等待时间为 baseDelay * 2^n（n 从 0 开始）

可配置：支持配置最大重试次数、基础延迟、最大延迟等

透传参数：返回的函数需支持传入任意参数并原样传给 fn

透传 this：返回的函数需正确保持 fn 的 this 指向

函数签名

代码如下： /**

@param {Function} fn - 异步函数 @param {Object} options - 可选配置 @param {number} options.maxRetries - 最大重试次数，默认 3 @param {number} options.baseDelay - 基础延迟(ms)，默认 1000 @param {number} options.maxDelay - 最大延迟(ms)，默认 30000 @returns {Function} 带重试逻辑的包装函数 */ function withRetry(fn, options) {}

八股题

https中的s是什么意思，详细说说

讲讲进程和线程

浏览器的渲染过程

你具体使用过worker吗

怎么减少页面白屏的时间

有个大数据表格，横向纵向可以滚动，你会怎么设计，保证帧率稳定在60

项目

你们组件库是怎么处理PC、Mobile双端的？

讲讲你对monorepo这个框架的理解，你们项目是怎么实现这个的

讲讲你对MCP协议的理解

怎么规范MCP描述

怎么实现AI对话的逐字回复

讲讲rrweb的实现原理

怎么控制rrweb录屏产生的数据体积大小

讲讲你这个SDK的整体框架

讲讲sourceMap解析

怎么进行错误去重

腾讯二面面经（一战）

问答（各种混合）

你在大厂实习学到了哪些东西

开发流程是怎么的，在大厂

组件库发布新版本之后，假如了出现了问题怎么处理？

回滚组件库项目会出现哪些问题

你对npm发包有多少了解

你们组件库版本是怎么处理的

你们组件库开发有没有封装一些工具

组件库有哪些具体的一个规范

怎么用skills让ai登录小红书并且发帖评论

写这个小红书相关的skills需要去注意什么

那这个skills的接口应该怎么去定义

假如让你设计一个组件库发布的MCP，你会怎么设计

MCP和skills有什么区别吗

为什么MCP更适合复杂工具，skills更适合简单工具，两个不都是可以暴露接口吗

开发前端项目怎么用ai提效

介绍一下你的这个前端监控SDK的项目

FCP、LCP的定义，哪个作为页面性能指标更合适

怎么捕获前端项目错误，有哪几种方式？

对于捕获显示的未知错误怎么处理

怎么平衡监控性能消耗和监控能力

讲讲你这个设计的请求降级链

查询数据要返回大量的数据，你会怎么优化这个请求的性能？

学过Python，node.js这些后端吗？

数据库的大数的数据类型是什么，以及时间的数据类型

数据库外连接和内连接的区别

http有哪些请求，哪些请求会先发option？

任意的请求方法都可以携带请求头字段吗？

怎么设置请求超时？

怎么设置请求头字段，提取响应头字段？

怎么封装异步请求重试函数？

讲讲你对装饰器模式的理解以及它的使用场景

什么是CDN加速？

查找最近的CDN节点的算法是怎么样的？

讲讲你们这个PDF下载实现，以及微信登录的流程

假如我们要实现一个授权登录，你会怎么设计？

你了解过微信登录的内部流程是怎么样的吗

怎么实现AI回复的多类型消息渲染

axios怎么设置成流式回复

你会对哪些大模型或者AI工具进行付费？

AI Coding

用户反馈页面

五言绝句生成系统

腾讯二面面经（二战）

项目

讲讲你这个前端监控sdk项目是怎么采集数据的

上报监控数据失败的时候，怎么进行重试

前端监控sdk假如数据上传失败，达到最大重试次数之后怎么办，就是直接丢弃吗

对组件封装有什么心得

你在实习中遇到的最大的困难是什么

组件库上线之后，假设出现了问题，你们是怎么排查问题的

你们组件库的组件命名和类命名规范是什么

八股

flex布局相对于其他布局有什么优势吗

讲讲什么是事件流？

什么是事件委托？

如何阻止事件冒泡？

讲讲网络协议有哪些

讲讲TCP三次握手

讲讲TLS握手

腾讯音乐一面面经

项目拷打

你这个mcp在AI搜索场景下的作用是什么

除了优化mcp和tool描述，你还做了哪些工作

mcp和skill有什么区别吗，它们之间的关系是什么

mcp和skill都可以调用工具，skill是否可以取代mcp

LCP、CLS、INP等性能指标你是怎么进行采集的

你是否知道其他性能指标

Web vitals实现性能指标采集的原理是什么

Long task是怎么采集的，怎么判断是Long task

JS手撕

手写mynew函数

代码输出题目：事件循环

代码如下：

console.log("start");

new Promise((resolve, reject) => {

console.log("p1");

resolve();

}).then(() => {

console.log("then1");

new Promise((resolve, reject) => {

console.log("p2");

resolve();

}).then(() => {

console.log("then2");

}).then(() => {

console.log("then3");

});

}).then(() => {

console.log("then4");

});

setTimeout(() => {

console.log("timeout1");

}, 0);

Promise.resolve().then(() => {

console.log("then5");

});

八股拷打

两栏布局怎么实现。

什么是BFC，怎么触发BFC

怎么实现垂直居中，grid怎么实现垂直居中

利用margin实现垂直居中的前提条件是什么

简单说一下盒子模型

盒模型类型怎么通过css改变

说一下箭头函数和普通函数有什么区别

构造函数在创建对象的时候会发生什么

bind之后的函数的this指向可以被call或者apply反复改变吗

bind、call、apply有什么区别

微任务有哪些

讲讲VUE2的响应式系统

怎么解决vue2响应式系统的缺陷

Keepalive内部缓存组件的淘汰的策略

vue：从数据更新后，到页面渲染这个阶段发生了什么

怎么设置强缓存的存储时间

腾讯音乐二面面经

代码输出题

题目1

代码如下：

console.log(a)

console.log(fn)

console.log©

var a=1;

function b()

{

console.log©

console.log(a)

let a=3;

}

let c=2;

b()

题目2

代码如下：

new Promise((resolve, reject) => {

console.log("p1");

resolve();

console.log("p2")

reject();

}).then(() => {

console.log("then1");

new Promise((resolve, reject) => {

console.log("p2");

resolve();

}).then(() => {

console.log("then2");

}).then(() => {

console.log("then3");

});

},()=>{

console.log("then4")

})

八股

变量的生命周期

let,const,var的区别

讲讲堆和栈的区别

普通对象和Map有什么区别吗

在vue中实现祖孙通信有哪些方式

手写实现Map

怎么实现按需加载组件（组件进入视口范围内才去加载组件）

vuex和pinia的底层实现原理是什么？

假设JS主线程有个长任务怎么去优化

怎么监控JS主线程是否处于空闲状态

项目

Promise的未捕获的reject错误怎么收集

讲讲这个组件bug修复

怎么实现错误采集（JS错误和资源加载错误）

怎么进行拦截网络请求

腾讯音乐三面面经

八股

讲讲ESM和commonJS的区别

A和B相互引用，ESM和common JS会死循环吗？

微任务和宏任务之间的差别

浏览器为什么要设置微任务和宏任务？

A是父元素，B是子元素，B设置margin-top为10px会发生什么？（margin 坍塌）

什么情况会触发重排？

讲一下跨域对请求的影响

如何手动中断http请求

怎么排查白屏出现的原因，用户端

怎么收集JS报错，资源加载错误

如何用一行代码求数组的平均值，不运行用eval

726

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法^{[1](#甘特图的mermaid语法1)} 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z

重做：Ctrl/Command + Y

加粗：Ctrl/Command + B

斜体：Ctrl/Command + I

标题：Ctrl/Command + Shift + H

无序列表：Ctrl/Command + Shift + U

有序列表：Ctrl/Command + Shift + O

检查列表：Ctrl/Command + Shift + C

插入代码：Ctrl/Command + Shift + K

插入链接：Ctrl/Command + Shift + L

插入图片：Ctrl/Command + Shift + G

查找：Ctrl/Command + F

替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。

输入2次#，并按下space后，将生成2级标题。

以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

javascript 复制代码

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中

使用:----------居左

使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants 是一个文本转换工具，主要功能是将普通的 ASCII 标点符号自动转换为更美观的印刷体标点符号。例如：

原始符号	转换后	说明
`"引号"`	"引号"	直引号变弯引号
`'单引号'`	'单引号'	直单引号变弯单引号
`--`	--	两个连字符变短破折号
`---`	---	三个连字符变长破折号
`...`	...	三个点变省略号

创建一个自定义列表

:
Text-to- conversion tool
: John
: Luke

如何创建一个注脚

一个具有注脚的文本。^[2](#2)

注释也是必不可少的

Markdown将文本转换为。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

#mermaid-svg-m4gJeZATOnuRur3w{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-m4gJeZATOnuRur3w .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-m4gJeZATOnuRur3w .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-m4gJeZATOnuRur3w .error-icon{fill:#552222;}#mermaid-svg-m4gJeZATOnuRur3w .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-m4gJeZATOnuRur3w .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-m4gJeZATOnuRur3w .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-m4gJeZATOnuRur3w .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-m4gJeZATOnuRur3w .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-m4gJeZATOnuRur3w .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-m4gJeZATOnuRur3w .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-m4gJeZATOnuRur3w .marker{fill:#333333;stroke:#333333;}#mermaid-svg-m4gJeZATOnuRur3w .marker.cross{stroke:#333333;}#mermaid-svg-m4gJeZATOnuRur3w svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-m4gJeZATOnuRur3w p{margin:0;}#mermaid-svg-m4gJeZATOnuRur3w .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-m4gJeZATOnuRur3w .exclude-range{fill:#eeeeee;}#mermaid-svg-m4gJeZATOnuRur3w .section{stroke:none;opacity:0.2;}#mermaid-svg-m4gJeZATOnuRur3w .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-m4gJeZATOnuRur3w .section2{fill:#fff400;}#mermaid-svg-m4gJeZATOnuRur3w .section1,#mermaid-svg-m4gJeZATOnuRur3w .section3{fill:white;opacity:0.2;}#mermaid-svg-m4gJeZATOnuRur3w .sectionTitle0{fill:#333;}#mermaid-svg-m4gJeZATOnuRur3w .sectionTitle1{fill:#333;}#mermaid-svg-m4gJeZATOnuRur3w .sectionTitle2{fill:#333;}#mermaid-svg-m4gJeZATOnuRur3w .sectionTitle3{fill:#333;}#mermaid-svg-m4gJeZATOnuRur3w .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-m4gJeZATOnuRur3w .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-m4gJeZATOnuRur3w .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-m4gJeZATOnuRur3w .grid path{stroke-width:0;}#mermaid-svg-m4gJeZATOnuRur3w .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-m4gJeZATOnuRur3w .task{stroke-width:2;}#mermaid-svg-m4gJeZATOnuRur3w .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-m4gJeZATOnuRur3w .task.clickable{cursor:pointer;}#mermaid-svg-m4gJeZATOnuRur3w .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-m4gJeZATOnuRur3w .taskText0,#mermaid-svg-m4gJeZATOnuRur3w .taskText1,#mermaid-svg-m4gJeZATOnuRur3w .taskText2,#mermaid-svg-m4gJeZATOnuRur3w .taskText3{fill:white;}#mermaid-svg-m4gJeZATOnuRur3w .task0,#mermaid-svg-m4gJeZATOnuRur3w .task1,#mermaid-svg-m4gJeZATOnuRur3w .task2,#mermaid-svg-m4gJeZATOnuRur3w .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutside0,#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutside2{fill:black;}#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutside1,#mermaid-svg-m4gJeZATOnuRur3w .taskTextOutside3{fill:black;}#mermaid-svg-m4gJeZATOnuRur3w .active0,#mermaid-svg-m4gJeZATOnuRur3w .active1,#mermaid-svg-m4gJeZATOnuRur3w .active2,#mermaid-svg-m4gJeZATOnuRur3w .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-m4gJeZATOnuRur3w .activeText0,#mermaid-svg-m4gJeZATOnuRur3w .activeText1,#mermaid-svg-m4gJeZATOnuRur3w .activeText2,#mermaid-svg-m4gJeZATOnuRur3w .activeText3{fill:black!important;}#mermaid-svg-m4gJeZATOnuRur3w .done0,#mermaid-svg-m4gJeZATOnuRur3w .done1,#mermaid-svg-m4gJeZATOnuRur3w .done2,#mermaid-svg-m4gJeZATOnuRur3w .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-m4gJeZATOnuRur3w .doneText0,#mermaid-svg-m4gJeZATOnuRur3w .doneText1,#mermaid-svg-m4gJeZATOnuRur3w .doneText2,#mermaid-svg-m4gJeZATOnuRur3w .doneText3{fill:black!important;}#mermaid-svg-m4gJeZATOnuRur3w .doneText0.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneText0.taskTextOutsideRight,#mermaid-svg-m4gJeZATOnuRur3w .doneText1.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneText1.taskTextOutsideRight,#mermaid-svg-m4gJeZATOnuRur3w .doneText2.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneText2.taskTextOutsideRight,#mermaid-svg-m4gJeZATOnuRur3w .doneText3.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-m4gJeZATOnuRur3w .crit0,#mermaid-svg-m4gJeZATOnuRur3w .crit1,#mermaid-svg-m4gJeZATOnuRur3w .crit2,#mermaid-svg-m4gJeZATOnuRur3w .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-m4gJeZATOnuRur3w .activeCrit0,#mermaid-svg-m4gJeZATOnuRur3w .activeCrit1,#mermaid-svg-m4gJeZATOnuRur3w .activeCrit2,#mermaid-svg-m4gJeZATOnuRur3w .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-m4gJeZATOnuRur3w .doneCrit0,#mermaid-svg-m4gJeZATOnuRur3w .doneCrit1,#mermaid-svg-m4gJeZATOnuRur3w .doneCrit2,#mermaid-svg-m4gJeZATOnuRur3w .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-m4gJeZATOnuRur3w .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-m4gJeZATOnuRur3w .milestoneText{font-style:italic;}#mermaid-svg-m4gJeZATOnuRur3w .doneCritText0,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText1,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText2,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText3{fill:black!important;}#mermaid-svg-m4gJeZATOnuRur3w .doneCritText0.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText0.taskTextOutsideRight,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText1.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText1.taskTextOutsideRight,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText2.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText2.taskTextOutsideRight,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText3.taskTextOutsideLeft,#mermaid-svg-m4gJeZATOnuRur3w .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-m4gJeZATOnuRur3w .vert{stroke:navy;}#mermaid-svg-m4gJeZATOnuRur3w .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-m4gJeZATOnuRur3w .activeCritText0,#mermaid-svg-m4gJeZATOnuRur3w .activeCritText1,#mermaid-svg-m4gJeZATOnuRur3w .activeCritText2,#mermaid-svg-m4gJeZATOnuRur3w .activeCritText3{fill:black!important;}#mermaid-svg-m4gJeZATOnuRur3w .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-m4gJeZATOnuRur3w :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 已完成进行中计划一计划二现有任务 Adding GANTT diagram functionality to mermaid

关于 甘特图 语法，参考这儿,

UML图表

可以使用UML图表进行渲染，例如下面产生的一个序列图：
王五李四张三王五李四张三 #mermaid-svg-xyl48khE07vJQxyE{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-xyl48khE07vJQxyE .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-xyl48khE07vJQxyE .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-xyl48khE07vJQxyE .error-icon{fill:#552222;}#mermaid-svg-xyl48khE07vJQxyE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xyl48khE07vJQxyE .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-xyl48khE07vJQxyE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xyl48khE07vJQxyE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xyl48khE07vJQxyE .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-xyl48khE07vJQxyE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xyl48khE07vJQxyE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xyl48khE07vJQxyE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xyl48khE07vJQxyE .marker.cross{stroke:#333333;}#mermaid-svg-xyl48khE07vJQxyE svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xyl48khE07vJQxyE p{margin:0;}#mermaid-svg-xyl48khE07vJQxyE .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-xyl48khE07vJQxyE text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-xyl48khE07vJQxyE .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-xyl48khE07vJQxyE .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-xyl48khE07vJQxyE .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-xyl48khE07vJQxyE .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-xyl48khE07vJQxyE #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-xyl48khE07vJQxyE .sequenceNumber{fill:white;}#mermaid-svg-xyl48khE07vJQxyE #sequencenumber{fill:#333;}#mermaid-svg-xyl48khE07vJQxyE #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-xyl48khE07vJQxyE .messageText{fill:#333;stroke:none;}#mermaid-svg-xyl48khE07vJQxyE .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-xyl48khE07vJQxyE .labelText,#mermaid-svg-xyl48khE07vJQxyE .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-xyl48khE07vJQxyE .loopText,#mermaid-svg-xyl48khE07vJQxyE .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-xyl48khE07vJQxyE .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-xyl48khE07vJQxyE .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-xyl48khE07vJQxyE .noteText,#mermaid-svg-xyl48khE07vJQxyE .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-xyl48khE07vJQxyE .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-xyl48khE07vJQxyE .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-xyl48khE07vJQxyE .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-xyl48khE07vJQxyE .actorPopupMenu{position:absolute;}#mermaid-svg-xyl48khE07vJQxyE .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-xyl48khE07vJQxyE .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-xyl48khE07vJQxyE .actor-man circle,#mermaid-svg-xyl48khE07vJQxyE line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-xyl48khE07vJQxyE :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李四想了很长时间, 文字太长了不适合放在一行. 你好！李四, 最近怎么样? 你最近怎么样，王五？我很好，谢谢! 我很好，谢谢! 打量着王五... 很好... 王五, 你怎么样?

关于 UML图表 语法，参考这儿,

流程图

#mermaid-svg-dH43xYkngcNHsoGk{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-dH43xYkngcNHsoGk .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-dH43xYkngcNHsoGk .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-dH43xYkngcNHsoGk .error-icon{fill:#552222;}#mermaid-svg-dH43xYkngcNHsoGk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dH43xYkngcNHsoGk .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-dH43xYkngcNHsoGk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dH43xYkngcNHsoGk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dH43xYkngcNHsoGk .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-dH43xYkngcNHsoGk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dH43xYkngcNHsoGk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dH43xYkngcNHsoGk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dH43xYkngcNHsoGk .marker.cross{stroke:#333333;}#mermaid-svg-dH43xYkngcNHsoGk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dH43xYkngcNHsoGk p{margin:0;}#mermaid-svg-dH43xYkngcNHsoGk .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-dH43xYkngcNHsoGk .cluster-label text{fill:#333;}#mermaid-svg-dH43xYkngcNHsoGk .cluster-label span{color:#333;}#mermaid-svg-dH43xYkngcNHsoGk .cluster-label span p{background-color:transparent;}#mermaid-svg-dH43xYkngcNHsoGk .label text,#mermaid-svg-dH43xYkngcNHsoGk span{fill:#333;color:#333;}#mermaid-svg-dH43xYkngcNHsoGk .node rect,#mermaid-svg-dH43xYkngcNHsoGk .node circle,#mermaid-svg-dH43xYkngcNHsoGk .node ellipse,#mermaid-svg-dH43xYkngcNHsoGk .node polygon,#mermaid-svg-dH43xYkngcNHsoGk .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dH43xYkngcNHsoGk .rough-node .label text,#mermaid-svg-dH43xYkngcNHsoGk .node .label text,#mermaid-svg-dH43xYkngcNHsoGk .image-shape .label,#mermaid-svg-dH43xYkngcNHsoGk .icon-shape .label{text-anchor:middle;}#mermaid-svg-dH43xYkngcNHsoGk .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-dH43xYkngcNHsoGk .rough-node .label,#mermaid-svg-dH43xYkngcNHsoGk .node .label,#mermaid-svg-dH43xYkngcNHsoGk .image-shape .label,#mermaid-svg-dH43xYkngcNHsoGk .icon-shape .label{text-align:center;}#mermaid-svg-dH43xYkngcNHsoGk .node.clickable{cursor:pointer;}#mermaid-svg-dH43xYkngcNHsoGk .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-dH43xYkngcNHsoGk .arrowheadPath{fill:#333333;}#mermaid-svg-dH43xYkngcNHsoGk .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-dH43xYkngcNHsoGk .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dH43xYkngcNHsoGk .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-dH43xYkngcNHsoGk .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-dH43xYkngcNHsoGk .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-dH43xYkngcNHsoGk .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-dH43xYkngcNHsoGk .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-dH43xYkngcNHsoGk .cluster text{fill:#333;}#mermaid-svg-dH43xYkngcNHsoGk .cluster span{color:#333;}#mermaid-svg-dH43xYkngcNHsoGk div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-dH43xYkngcNHsoGk .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-dH43xYkngcNHsoGk rect.text{fill:none;stroke-width:0;}#mermaid-svg-dH43xYkngcNHsoGk .icon-shape,#mermaid-svg-dH43xYkngcNHsoGk .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-dH43xYkngcNHsoGk .icon-shape p,#mermaid-svg-dH43xYkngcNHsoGk .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-dH43xYkngcNHsoGk .icon-shape .label rect,#mermaid-svg-dH43xYkngcNHsoGk .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-dH43xYkngcNHsoGk .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-dH43xYkngcNHsoGk .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-dH43xYkngcNHsoGk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 链接
长方形
圆
圆角长方形
菱形

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart.js的流程图语法：
Created with Raphaël 2.3.0 开始我的操作确认？结束 yes no

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，

继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎

*[HTML]: 超文本标记语言