VSCode 安装和使用 Claude Code 完整指南

kebidaixu2026-06-06 16:08

文章目录

前言

本文总结了在本地 Windows VSCode 中安装配置 Claude Code + DeepSeek V4 的完整流程，以及在远程 ARM64 板子（Ubuntu 20.04）上部署 Claude Code 的方案选型过程。

参考视频：在VSCode中配置Claude Code并接入DeepSeek V4(ccswitch+claudecode extension)

一、本地 VSCode 安装配置 Claude Code

整体架构：

复制代码 
VSCode 编辑器
  └── Claude Code for VS Code（插件）
        └── CC Switch（模型网关 / 本地路由）
              └── DeepSeek V4-Pro / V4-Flash（API 模型）

CC Switch 的作用是在不破坏 Claude Code 原生体验的前提下，将 API 请求透明地桥接到第三方模型（如 DeepSeek V4）。

1.1 环境准备

依赖项 要求 说明
操作系统 Windows 10+ 本教程基于 Windows 11
VSCode ≥ 1.98.0 旧版本不支持该扩展
Node.js ≥ 18.0 Claude Code CLI 的运行环境
Git 任意版本 版本管理

检查版本：

powershell 复制代码 
code --version
node --version
git --version

1.2 安装 Claude Code CLI

重要变更（2026年）：Anthropic 官方已从 npm 迁移到原生安装器，npm 方式虽仍可用但已标记为废弃。推荐使用原生安装器。

方式一：WinGet 安装（推荐，最简洁）

powershell 复制代码 
winget install Anthropic.ClaudeCode

方式二：PowerShell 脚本安装

powershell 复制代码 
irm https://claude.ai/install.ps1 | iex

安装完成后，确保 C:\Users\<用户名>\.local\bin\ 已添加到系统 PATH 环境变量。

方式三：npm 安装（备用，需 Node.js ≥ 18）

powershell 复制代码 
npm install -g @anthropic-ai/claude-code

验证安装：

powershell 复制代码 
claude --version
# 预期输出：Claude Code v2.1.x (native)

1.3 安装 VSCode 扩展

第一步 ：打开 VSCode，按 Ctrl+Shift+X 打开扩展面板

第二步 ：搜索 Claude Code ，务必确认发布者为 Anthropic（避免第三方仿冒版本）

第三步 ：点击 Install 安装

命令行安装方式：

powershell 复制代码 
code --install-extension anthropic.claude-code

安装成功后，VSCode 右上角会出现 ⚡ Spark 图标，底部状态栏会出现 ✱ Claude Code 入口。

三种打开方式：

方式 操作 适用场景
Spark 图标 ⚡ 点击编辑器右上角图标 快速针对当前文件提问
状态栏 ✱ 点击底部状态栏 无文件时也能对话
命令面板 Ctrl+Shift+P 搜索 Claude Code 开启新对话标签页

三种模式（Shift+Tab 循环切换）：

模式 说明 适用场景
Edit（编辑） Claude 提出修改，逐条审核接受/拒绝 需要精确控制每次编辑
Auto-Accept Claude 自动执行修改，无需逐条确认 脚手架搭建、原型
Plan（计划） 只读分析，不修改文件 架构探索、代码评审

1.4 安装 CC Switch

CC Switch 是一个模型网关工具，负责在本地将 Claude Code 的 API 请求路由到第三方模型。

GitHub 仓库 ：farion1231/ccswitch

各平台安装方式：

平台 安装方式
Windows 下载 .msi 安装包 或 Portable.zip 便携版
macOS brew tap farion1231/ccswitch && brew install --cask cc-switch
Linux 下载 .AppImage 或 .deb / .rpm 安装包

Windows 安装步骤：

  1. 前往 CC Switch Releases 下载最新版 .msi
  2. 双击运行，全程默认下一步完成安装
  3. 启动 CC Switch，系统托盘会出现图标

1.5 获取 DeepSeek API Key

  1. 访问 platform.deepseek.com
  2. 注册账号并登录
  3. 进入 API Keys → 点击 创建 API Key
  4. 复制生成的 sk- 开头的密钥，妥善保存

省钱小贴士：DeepSeek V4-Pro 限时 2.5 折，充值 10 元就能用很久。也可以使用阿里百炼（新用户送 100 万 V4 Token，90 天有效）。

1.6 CC Switch 配置 DeepSeek

第一步 ：打开 CC Switch，点击右上角 + 按钮添加新供应商

第二步 ：供应商类型选择 DeepSeek

第三步：填写配置参数：

配置项 值 说明
API Key sk-xxxxxxxx 上一步获取的密钥
Base URL https://api.deepseek.com/anthropic 注意是 /anthropic 端点，非 /v1
API 格式 Anthropic Messages（原生） 关键！不是 OpenAI 兼容格式
主模型 (Sonnet) deepseek-v4-pro 主力开发模型
Haiku 模型 deepseek-v4-flash 子 Agent 快速任务
Opus 模型 deepseek-v4-pro 复杂架构设计

提示 ：模型名加 [1m] 后缀（如 deepseek-v4-pro[1m]）可启用 100 万 token 超长上下文。

第四步 ：点击 添加 保存配置

第五步 ：在首页点击刚创建的配置 → 点击 启用

第六步 ：使用 健康检查 按钮测试连通性

1.7 VSCode 侧最终配置

打开 VSCode 设置（Ctrl+,）→ 搜索 claudeCode.environmentVariables → 点击 在 settings.json 中编辑：

json 复制代码 
{
  "claudeCode.environmentVariables": [
    {
      "name": "ANTHROPIC_BASE_URL",
      "value": "https://api.deepseek.com/anthropic"
    },
    {
      "name": "ANTHROPIC_AUTH_TOKEN",
      "value": "sk-你的DeepSeek_API_Key"
    },
    {
      "name": "ANTHROPIC_DEFAULT_MODEL",
      "value": "deepseek-v4-pro"
    }
  ]
}

补充说明：如果你已经在 CC Switch 中启用了 DeepSeek 配置，Claude Code 插件通常会自动检测到 CC Switch 的路由规则，无需手动配置以上环境变量。以上配置作为手动直连的备选方案。

1.8 验证与使用

  1. 重启 VSCode

  2. 打开任意代码文件

  3. 点击右上角 ⚡ 图标，或按 Ctrl+Esc 切换焦点到 Claude Code

  4. 输入 /model 查看当前模型：

    当前模型：deepseek-v4-pro

核心快捷键速查：

操作 快捷键
切换编辑器 / Claude 焦点 Ctrl+Esc
新建对话 Ctrl+N
插入文件路径 Alt+K
循环切换模式 Shift+Tab
切换扩展思考 Alt+T
回退到上一检查点 Esc Esc

二、远程板子（Ubuntu 20.04 ARM64）安装 Claude Code

2.1 环境背景

  • 硬件平台：飞凌 OK3568 开发板
  • CPU 架构：aarch64 / ARM64
  • 操作系统：Ubuntu 20.04 LTS（Linux 4.19.206）
  • 使用场景：开发 BMS 电池管理系统（C/C++ 项目），希望借助 AI 编程助手提高在板调试效率

2.2 问题分析：三重障碍

在远程 ARM64 板子上使用 Claude Code 面临三重障碍。

障碍一：VSCode 扩展不支持 ARM64 架构

Claude Code 的 VSCode 扩展 anthropic.claude-code 目前仅发布 linux-x64 版本，没有 linux-arm64 构建。通过 VSCode Remote SSH 连接板子后，无法像本地一样安装和使用 Claude Code 的图形化扩展。

相关讨论见 GitHub Issue（bubble 项目 #248）：VS Code 市场 API 在按 linux-arm64 平台过滤查询时返回空结果。

障碍二：Ubuntu 20.04 的 glibc 版本过低

Ubuntu 20.04 自带的 glibc 版本为 2.31：版本不满足某些新版 Node.js 二进制的要求（Node.js 22+ 需要 glibc ≥ 2.35）。强行安装新版 Node.js 会报错：

复制代码 
/lib/aarch64-linux-gnu/libc.so.6: version `GLIBC_2.34' not found

障碍三：板子资源受限

嵌入式板子 CPU 性能和内存都有限（通常 2-4GB RAM），运行完整的 VSCode Server 本身就消耗大量资源，再叠加 AI 编程助手可能不堪重负。

2.3 可选方案对比

针对以上问题，我们梳理了四种可行方案：

方案 思路 优点 缺点
A：升级系统 Ubuntu 20.04 升级到 22.04/24.04 glibc 升级到 2.35+，兼容性好 嵌入式板子升级风险大，可能破坏 BSP 驱动
B：只用 CLI SSH 到板子，终端运行 claude 命令 无需 GUI 扩展，资源占用低，ARM64 原生支持 缺少可视化 diff、检查点回退等 GUI 特性
C：Docker 容器 板子上跑 Ubuntu 22.04 容器 隔离环境，不破坏宿主机 容器本身有开销，ARM64 镜像兼容性需验证
D：本地开发+同步 本地 VSCode 写代码，scp 同步到板子编译 零板子端开销，体验最佳 不能直接在板子上调试时使用 AI

2.4 最终方案：混合策略

我们选择了方案 B + 方案 D 的混合策略：

  • 日常开发 ：在本地 Windows VSCode 中使用 Claude Code 扩展（接入 DeepSeek V4），代码完成后通过 scp 同步到板子编译运行
  • 板上调试 ：SSH 登录板子后，在终端中直接使用 Claude Code CLI（通过 npm 安装 Node.js 20 LTS 兼容版本），配合 tmux 保持会话持久化

选择理由：

  1. 不需升级系统 ------ 避免破坏飞凌 BSP 的底层依赖
  2. 不依赖 ARM64 VSCode 扩展 ------ 直接用 CLI 绕过了架构兼容问题
  3. 灵活切换 ------ 主力开发用本地 GUI，紧急板上改 bug 也能用 CLI
  4. Node.js 20 LTS 兼容 glibc 2.31 ------ 这是关键的技术可行性基础

三、总结

环境 方案 核心工具链
本地 Windows VSCode 完整 GUI 体验 Claude Code Extension + CC Switch + DeepSeek V4-Pro
远程 ARM64 板子 CLI 终端模式 SSH + tmux + Claude Code CLI + DeepSeek V4-Pro

关键经验：

  1. CC Switch 的 Base URL 必须用 /anthropic 端点，不能用 OpenAI 兼容的 /v1 端点，否则模型调用会出错
  2. ARM64 板子不要试图装 VSCode 扩展 ------ 目前没有 linux-arm64 构建版本
  3. Node.js 版本与 glibc 的匹配是核心 ------ Ubuntu 20.04 选 Node.js 20 LTS 是最优解
  4. tmux 是远程 CLI 开发的必备工具 ------ 断线不断任务，体验提升巨大

最后更新：2026-06-05

参考资料：

欢迎使用Markdown编辑器

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

新的改变

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

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

功能快捷键

撤销：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语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

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

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

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

javascript 复制代码 
// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目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-pXqYAf3rFosKBg29{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-pXqYAf3rFosKBg29 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-pXqYAf3rFosKBg29 .error-icon{fill:#552222;}#mermaid-svg-pXqYAf3rFosKBg29 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pXqYAf3rFosKBg29 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pXqYAf3rFosKBg29 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pXqYAf3rFosKBg29 .marker.cross{stroke:#333333;}#mermaid-svg-pXqYAf3rFosKBg29 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pXqYAf3rFosKBg29 p{margin:0;}#mermaid-svg-pXqYAf3rFosKBg29 .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-pXqYAf3rFosKBg29 .exclude-range{fill:#eeeeee;}#mermaid-svg-pXqYAf3rFosKBg29 .section{stroke:none;opacity:0.2;}#mermaid-svg-pXqYAf3rFosKBg29 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-pXqYAf3rFosKBg29 .section2{fill:#fff400;}#mermaid-svg-pXqYAf3rFosKBg29 .section1,#mermaid-svg-pXqYAf3rFosKBg29 .section3{fill:white;opacity:0.2;}#mermaid-svg-pXqYAf3rFosKBg29 .sectionTitle0{fill:#333;}#mermaid-svg-pXqYAf3rFosKBg29 .sectionTitle1{fill:#333;}#mermaid-svg-pXqYAf3rFosKBg29 .sectionTitle2{fill:#333;}#mermaid-svg-pXqYAf3rFosKBg29 .sectionTitle3{fill:#333;}#mermaid-svg-pXqYAf3rFosKBg29 .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-pXqYAf3rFosKBg29 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-pXqYAf3rFosKBg29 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-pXqYAf3rFosKBg29 .grid path{stroke-width:0;}#mermaid-svg-pXqYAf3rFosKBg29 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-pXqYAf3rFosKBg29 .task{stroke-width:2;}#mermaid-svg-pXqYAf3rFosKBg29 .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-pXqYAf3rFosKBg29 .task.clickable{cursor:pointer;}#mermaid-svg-pXqYAf3rFosKBg29 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-pXqYAf3rFosKBg29 .taskText0,#mermaid-svg-pXqYAf3rFosKBg29 .taskText1,#mermaid-svg-pXqYAf3rFosKBg29 .taskText2,#mermaid-svg-pXqYAf3rFosKBg29 .taskText3{fill:white;}#mermaid-svg-pXqYAf3rFosKBg29 .task0,#mermaid-svg-pXqYAf3rFosKBg29 .task1,#mermaid-svg-pXqYAf3rFosKBg29 .task2,#mermaid-svg-pXqYAf3rFosKBg29 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutside0,#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutside2{fill:black;}#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutside1,#mermaid-svg-pXqYAf3rFosKBg29 .taskTextOutside3{fill:black;}#mermaid-svg-pXqYAf3rFosKBg29 .active0,#mermaid-svg-pXqYAf3rFosKBg29 .active1,#mermaid-svg-pXqYAf3rFosKBg29 .active2,#mermaid-svg-pXqYAf3rFosKBg29 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-pXqYAf3rFosKBg29 .activeText0,#mermaid-svg-pXqYAf3rFosKBg29 .activeText1,#mermaid-svg-pXqYAf3rFosKBg29 .activeText2,#mermaid-svg-pXqYAf3rFosKBg29 .activeText3{fill:black!important;}#mermaid-svg-pXqYAf3rFosKBg29 .done0,#mermaid-svg-pXqYAf3rFosKBg29 .done1,#mermaid-svg-pXqYAf3rFosKBg29 .done2,#mermaid-svg-pXqYAf3rFosKBg29 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-pXqYAf3rFosKBg29 .doneText0,#mermaid-svg-pXqYAf3rFosKBg29 .doneText1,#mermaid-svg-pXqYAf3rFosKBg29 .doneText2,#mermaid-svg-pXqYAf3rFosKBg29 .doneText3{fill:black!important;}#mermaid-svg-pXqYAf3rFosKBg29 .doneText0.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneText0.taskTextOutsideRight,#mermaid-svg-pXqYAf3rFosKBg29 .doneText1.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneText1.taskTextOutsideRight,#mermaid-svg-pXqYAf3rFosKBg29 .doneText2.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneText2.taskTextOutsideRight,#mermaid-svg-pXqYAf3rFosKBg29 .doneText3.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-pXqYAf3rFosKBg29 .crit0,#mermaid-svg-pXqYAf3rFosKBg29 .crit1,#mermaid-svg-pXqYAf3rFosKBg29 .crit2,#mermaid-svg-pXqYAf3rFosKBg29 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-pXqYAf3rFosKBg29 .activeCrit0,#mermaid-svg-pXqYAf3rFosKBg29 .activeCrit1,#mermaid-svg-pXqYAf3rFosKBg29 .activeCrit2,#mermaid-svg-pXqYAf3rFosKBg29 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-pXqYAf3rFosKBg29 .doneCrit0,#mermaid-svg-pXqYAf3rFosKBg29 .doneCrit1,#mermaid-svg-pXqYAf3rFosKBg29 .doneCrit2,#mermaid-svg-pXqYAf3rFosKBg29 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-pXqYAf3rFosKBg29 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-pXqYAf3rFosKBg29 .milestoneText{font-style:italic;}#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText0,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText1,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText2,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText3{fill:black!important;}#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText0.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText0.taskTextOutsideRight,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText1.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText1.taskTextOutsideRight,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText2.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText2.taskTextOutsideRight,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText3.taskTextOutsideLeft,#mermaid-svg-pXqYAf3rFosKBg29 .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-pXqYAf3rFosKBg29 .vert{stroke:navy;}#mermaid-svg-pXqYAf3rFosKBg29 .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-pXqYAf3rFosKBg29 .activeCritText0,#mermaid-svg-pXqYAf3rFosKBg29 .activeCritText1,#mermaid-svg-pXqYAf3rFosKBg29 .activeCritText2,#mermaid-svg-pXqYAf3rFosKBg29 .activeCritText3{fill:black!important;}#mermaid-svg-pXqYAf3rFosKBg29 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-pXqYAf3rFosKBg29 :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-9VO6BV6rWgk6qKsz{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-9VO6BV6rWgk6qKsz .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-9VO6BV6rWgk6qKsz .error-icon{fill:#552222;}#mermaid-svg-9VO6BV6rWgk6qKsz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9VO6BV6rWgk6qKsz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9VO6BV6rWgk6qKsz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9VO6BV6rWgk6qKsz .marker.cross{stroke:#333333;}#mermaid-svg-9VO6BV6rWgk6qKsz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9VO6BV6rWgk6qKsz p{margin:0;}#mermaid-svg-9VO6BV6rWgk6qKsz .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-9VO6BV6rWgk6qKsz text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-9VO6BV6rWgk6qKsz .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-9VO6BV6rWgk6qKsz .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-9VO6BV6rWgk6qKsz #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-9VO6BV6rWgk6qKsz .sequenceNumber{fill:white;}#mermaid-svg-9VO6BV6rWgk6qKsz #sequencenumber{fill:#333;}#mermaid-svg-9VO6BV6rWgk6qKsz #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-9VO6BV6rWgk6qKsz .messageText{fill:#333;stroke:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-9VO6BV6rWgk6qKsz .labelText,#mermaid-svg-9VO6BV6rWgk6qKsz .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .loopText,#mermaid-svg-9VO6BV6rWgk6qKsz .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .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-9VO6BV6rWgk6qKsz .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-9VO6BV6rWgk6qKsz .noteText,#mermaid-svg-9VO6BV6rWgk6qKsz .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-9VO6BV6rWgk6qKsz .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-9VO6BV6rWgk6qKsz .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-9VO6BV6rWgk6qKsz .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-9VO6BV6rWgk6qKsz .actorPopupMenu{position:absolute;}#mermaid-svg-9VO6BV6rWgk6qKsz .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-9VO6BV6rWgk6qKsz .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-9VO6BV6rWgk6qKsz .actor-man circle,#mermaid-svg-9VO6BV6rWgk6qKsz line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-9VO6BV6rWgk6qKsz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 李四想了很长时间, 文字太长了 不适合放在一行. 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 打量着王五... 很好... 王五, 你怎么样?

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

流程图

#mermaid-svg-67ZcI1orPPUSk7Ve{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-67ZcI1orPPUSk7Ve .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-67ZcI1orPPUSk7Ve .error-icon{fill:#552222;}#mermaid-svg-67ZcI1orPPUSk7Ve .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-67ZcI1orPPUSk7Ve .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-67ZcI1orPPUSk7Ve .marker{fill:#333333;stroke:#333333;}#mermaid-svg-67ZcI1orPPUSk7Ve .marker.cross{stroke:#333333;}#mermaid-svg-67ZcI1orPPUSk7Ve svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-67ZcI1orPPUSk7Ve p{margin:0;}#mermaid-svg-67ZcI1orPPUSk7Ve .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve .cluster-label text{fill:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve .cluster-label span{color:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve .cluster-label span p{background-color:transparent;}#mermaid-svg-67ZcI1orPPUSk7Ve .label text,#mermaid-svg-67ZcI1orPPUSk7Ve span{fill:#333;color:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve .node rect,#mermaid-svg-67ZcI1orPPUSk7Ve .node circle,#mermaid-svg-67ZcI1orPPUSk7Ve .node ellipse,#mermaid-svg-67ZcI1orPPUSk7Ve .node polygon,#mermaid-svg-67ZcI1orPPUSk7Ve .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-67ZcI1orPPUSk7Ve .rough-node .label text,#mermaid-svg-67ZcI1orPPUSk7Ve .node .label text,#mermaid-svg-67ZcI1orPPUSk7Ve .image-shape .label,#mermaid-svg-67ZcI1orPPUSk7Ve .icon-shape .label{text-anchor:middle;}#mermaid-svg-67ZcI1orPPUSk7Ve .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-67ZcI1orPPUSk7Ve .rough-node .label,#mermaid-svg-67ZcI1orPPUSk7Ve .node .label,#mermaid-svg-67ZcI1orPPUSk7Ve .image-shape .label,#mermaid-svg-67ZcI1orPPUSk7Ve .icon-shape .label{text-align:center;}#mermaid-svg-67ZcI1orPPUSk7Ve .node.clickable{cursor:pointer;}#mermaid-svg-67ZcI1orPPUSk7Ve .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-67ZcI1orPPUSk7Ve .arrowheadPath{fill:#333333;}#mermaid-svg-67ZcI1orPPUSk7Ve .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-67ZcI1orPPUSk7Ve .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-67ZcI1orPPUSk7Ve .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-67ZcI1orPPUSk7Ve .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-67ZcI1orPPUSk7Ve .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-67ZcI1orPPUSk7Ve .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-67ZcI1orPPUSk7Ve .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-67ZcI1orPPUSk7Ve .cluster text{fill:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve .cluster span{color:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve 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-67ZcI1orPPUSk7Ve .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-67ZcI1orPPUSk7Ve rect.text{fill:none;stroke-width:0;}#mermaid-svg-67ZcI1orPPUSk7Ve .icon-shape,#mermaid-svg-67ZcI1orPPUSk7Ve .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-67ZcI1orPPUSk7Ve .icon-shape p,#mermaid-svg-67ZcI1orPPUSk7Ve .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-67ZcI1orPPUSk7Ve .icon-shape .label rect,#mermaid-svg-67ZcI1orPPUSk7Ve .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-67ZcI1orPPUSk7Ve .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-67ZcI1orPPUSk7Ve .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-67ZcI1orPPUSk7Ve :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文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，

继续你的创作。

  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

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

相关推荐
朗晴1 小时前
Linux开机重置密码时做了什么？
linux·运维·服务器
烟雨江南aabb2 小时前
Docker第四弹：Dockerfile
linux·运维·docker
坤昱2 小时前
cfs调度类深入解刨——EAS科普篇
linux·cfs·linux内核调度·cfs调度类深入解刨·cfs调度类·eas·cfs调度器eas特性
itinymeng2 小时前
在Alibaba Cloud Linux 4 LTS 64位 中安装htop
linux·运维·服务器
白藏y2 小时前
【Linux】基础 IO（一）—— 文件操作及文件系统
linux
utf8mb4安全女神3 小时前
shell中的判断语法
linux·运维·服务器
mifengxing4 小时前
操作系统(五)
linux·运维·服务器·操作系统·王道考研
ALINX技术博客4 小时前
【黑金云课堂】FPGA技术教程Linux开发：NVMe/Qt/OpenCV人脸检测
linux·qt·fpga开发
kebidaixu5 小时前
OK3568 RTC 驱动适配与 Linux 系统时间管理总结
linux
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结04Codex 下载安装指南：Windows 和 macOS 官方版下载05Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复06【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法07CC-Switch 下载、安装与使用配置指南【2026.5.29】08Codex 接入 DeepSeek API 完整配置文档09CC-Switch & Claude 基于 Linux 服务器安装使用指南10裂开！ChatGPT 居然开始要手机号验证，附详细解决方法