完整编程速查表

格式: .md
定位: 一站式编程速查表,合并 dmb.html 所有分类 + 新增 Mermaid 分类

说明: 产出物1 是独立的 Mermaid 速查表;产出物6 是在其基础上,补充网络/操作系统/HTML/CSS/JS/Markdown/颜色/Linux/K鸿蒙等全部分类,形成一份覆盖所有常用场景的完整大速查表。

⚠️ 提示:以下速查表内容已在产出物1和产出物4、5的对话中陆续输出完毕,为保证最终交付的完整性,这里直接输出 完整合并版,供你复制保存为独立文件。

| 清空日志文件 | > 日志文件路径 | > /mnt/nas/web/all_access.log — 清空 NAS 访问日志 |


完整编程速查表(大合并版)

本速查表整合网络配置、操作系统命令、前端开发(HTML/CSS/JS)、Markdown 写作、颜色代码、Mermaid 流程图等常用编程知识。所有分类采用统一的三列表格格式(名称 | 代码 | 用例),便于快速查阅和复制使用。

使用说明:

  • 代码块中内容表示可直接复制运行的命令或代码
  • 用例列提供实际场景示例,帮助理解用法
  • 标注 ⚠️ 的为易错点,建议特别注意
  • 本表可在 Obsidian、VS Code、Typora 等 Markdown 编辑器中直接使用

一、网络与 DNS

公共 DNS 地址、网络连通测试、端口查看等常用网络命令。

公共 DNS 列表

运营商名称 主 DNS 辅助 DNS
114DNS 114.114.114.114 114.114.115.115
阿里 DNS 223.5.5.5 223.6.6.6
百度 DNS 180.76.76.76 180.76.76.76
腾讯 DNS 119.29.29.29 119.28.28.28
中国移动 211.137.58.20 218.201.96.130
中国电信 218.85.157.99 114.114.114.114
中国联通 122.192.6.4 221.5.88.88
Google DNS 8.8.8.8 8.8.4.4
Cloudflare DNS 1.1.1.1 1.0.0.1
Quad9 DNS 9.9.9.9 149.112.112.112

网络测试与诊断命令

名称 代码 用例
测试网络连通性 ping 目标地址 ping www.baidu.com — 测试外网连通性
ping -n 10 8.8.8.8 — Windows 指定 ping 10 次
ping -c 5 192.168.1.1 — Linux/Mac 指定 ping 5 次
持续 ping ping -t 目标地址 (Win) ping -t 192.168.1.1 — 持续 ping 网关,按 Ctrl+C 停止
跟踪路由路径 tracert 目标地址 (Win)
traceroute 目标地址 (Mac/Linux)
tracert baidu.com — 跟踪到百度的路由节点
traceroute -n 8.8.8.8 — 不解析 IP 域名,速度更快
路径丢包分析 pathping 目标地址 pathping baidu.com — 分析路由各节点丢包率(Windows 专属)
域名解析查询 nslookup 域名 nslookup baidu.com — 查看域名对应 IP
nslookup 8.8.8.8 — 反向解析 IP 对应域名
查看本机 IP ipconfig (Win)
ip aifconfig (Mac/Linux)
ipconfig /all — Windows 查看详细网络配置
ip a show eth0 — Linux 查看指定网卡信息
查看网络连接/端口 netstat (Win)
ss (Linux)
netstat -an — 显示所有连接和监听端口
netstat -ano — 显示连接对应的进程 PID
ss -tlnp — Linux 查看端口与进程
测试端口连通性 telnet IP 端口 telnet 192.168.1.1 80 — 测试网关 80 端口是否开放
重置网络栈(Win) netsh winsock reset 管理员权限运行,修复网络异常后需重启
关闭防火墙(Win) netsh advfirewall set allprofiles state off 管理员权限运行,临时关闭所有防火墙配置
远程连接 SSH ssh 用户名@IP地址 ssh root@192.168.1.100 — 远程连接 Linux 服务器
ssh -p 8022 user@192.168.1.100 — 指定端口连接

二、操作系统常用命令

跨平台通用命令 + 各操作系统专属命令,按系统分类。

跨平台通用命令

名称 Windows Mac / Linux 用例
查看当前目录 dir ls ls -l — 查看详细列表(Mac/Linux)
dir /s — 递归列出所有子目录文件(Win)
切换目录 cd 目录名 cd 目录名 cd Documents — 进入 Documents 文件夹
cd /usr/local — 进入指定目录(Linux)
cd /d D:\work — 跨盘符切换(Win)
返回上一级 cd .. cd .. cd .. — 返回上级目录
cd ../.. — 返回上两级目录
返回主目录 cd %HOMEPATH% cd ~ cd ~ — 回到用户主目录(Mac/Linux)
显示当前路径 pwd pwd — 查看当前所在完整路径(Linux/Mac)
清空屏幕 cls clear clear — 清空终端屏幕内容
创建文件夹 md 文件夹名 mkdir 文件夹名 mkdir new_folder — 创建单个文件夹
mkdir -p dir1/dir2 — 递归创建多级目录(Linux)
删除空文件夹 rd 文件夹名 rmdir 文件夹名 rmdir empty_dir — 删除空目录
删除文件 del 文件名 rm 文件名 del test.txt — Win 删除文件
rm -f temp.log — Linux 强制删除
删除目录(含内容) rmdir /s 目录名 rm -rf 目录名 rm -rf old_folder — 强制删除目录及所有内容(⚠️ 谨慎使用)
复制文件 copy 源 目标 cp 源 目标 copy a.txt D:\backup\ — Win 复制
cp -r /src /dst — Linux 递归复制文件夹
移动/重命名 move 源 目标 mv 源 目标 mv old.txt new.txt — 重命名
mv test.log /var/log/ — 移动文件
查看文本内容 type 文件名 cat 文件名 cat config.ini — 查看配置文件内容
`cat log.txt
修改文件属性(Win) attrib attrib +h secret.txt — 隐藏文件
attrib -r readme.txt — 取消只读
管理员权限 右键"以管理员身份运行" sudo 命令 sudo apt update — Linux 管理员执行
sudo -i — 切换 root 用户
查看进程 tasklist ps aux `tasklist
结束进程 taskkill /f /im 进程名 kill 进程号 taskkill /f /im notepad.exe — Win 强制关闭
kill -9 1234 — Linux 强制结束 PID 1234
关机 shutdown /s /t 秒 poweroff shutdown /s /t 60 — Win 60 秒后关机
poweroff — Linux 立即关机
重启 shutdown /r /t 秒 reboot shutdown /r /t 30 — Win 30 秒后重启
reboot -f — Linux 强制重启
取消关机(Win) shutdown /a shutdown /a — 取消已计划的关机/重启
查看系统信息 systeminfo uname -a systeminfo > sys.txt — Win 导出系统信息
uname -r — Linux 查看内核版本
清空日志文件 > 日志文件路径 > /mnt/nas/web/all_access.log — SSH 下清空 NAS 访问日志,保留空文件(⚠️ 清空不可恢复)

Windows 专属命令

名称 代码 用例
查看 Windows 版本 winver 运行(Win+R)中输入 winver 执行
查看系统详细信息 msinfo32 查看硬件、软件、组件等系统信息
查看 DirectX 诊断信息 dxdiag 查看显卡、声音等 DirectX 信息
修复损坏系统文件 sfc /scannow 管理员权限运行,扫描并修复系统文件
检查并修复磁盘错误 chkdsk 盘符: /f chkdsk C: /f — 修复 C 盘错误,需重启
磁盘分区管理 diskpart 管理员权限运行,后续输入 create partition primary 等子命令
磁盘清理 cleanmgr cleanmgr C: — 清理 C 盘临时文件、回收站等
打开任务管理器 taskmgr 快捷键 Ctrl+Shift+Esc 也可打开
打开服务管理器 services.msc 启动/停止/设置服务自启(如 MySQL 服务)
打开计算机管理 compmgmt.msc 管理磁盘、用户、事件查看器等
打开设备管理器 devmgmt.msc 安装/卸载/更新硬件驱动
复制目录及文件(增强) xcopy 源 目标 /s /e xcopy source_dir D:\dest /s /e — 复制所有子目录,包括空目录

Mac / Linux 专属命令

名称 代码 用例
文件授权(加执行权限) chmod +x 文件名 chmod +x run.sh — 让 Shell 脚本可执行
文件授权(数字模式) chmod 755 文件名 chmod 644 config.ini — 设置读写权限
chmod 755 script.py — rwxr-xr-x
查看端口占用(Mac/Linux) lsof -i:端口号 sudo lsof -i:80 — 查看 80 端口占用进程
扫描局域网主机(需安装) nmap 目标 sudo apt install nmap — 安装 nmap
nmap -sn 192.168.1.0/24 — 扫描在线主机
nmap -F 192.168.1.100 — 快速扫描常见端口
查看已建立的 TCP 连接 ss -tn state established 只看已建立的 TCP 连接,排除监听状态
查看网络收发连接 ss -ltnsudo ss -tnp ss -tnp — 查看连接及对应进程(需 sudo)

K鸿蒙 / Ubuntu 通用命令

适用于 K鸿蒙(开源鸿蒙)和 Ubuntu 系统的包管理与系统配置。

名称 代码 用例
查看系统发行版本 lsb_release -a 查看 Ubuntu/K鸿蒙 系统版本与代号
查看内核版本 uname -r 快速查看当前 Linux 内核版本
查看完整硬件信息 inxi -Fxz 查看 CPU、内存、显卡、硬盘全套硬件参数
查看内存使用 free -h 人性化显示已用/空闲内存、交换分区
查看磁盘分区占用 df -h 查看各分区存储空间剩余与使用率
查看文件夹大小 du -sh 目录名 du -sh ~/Documents — 统计该目录整体大小
更新软件源缓存 sudo apt update 同步仓库软件列表,Ubuntu 与 K鸿蒙通用
升级所有软件 sudo apt upgrade -y 一键升级已安装的所有程序与系统组件
安装软件 sudo apt install 软件名 sudo apt install nano — 安装文本编辑器
普通卸载软件 sudo apt remove 软件名 删除程序,保留用户配置文件
彻底卸载(含配置) sudo apt purge 软件名 删除软件并清空所有残留配置文件
清理无用依赖 sudo apt autoremove 自动卸载多余的依赖包,释放空间
修复依赖问题 sudo apt -f install -y 安装失败缺依赖时使用
安装 .deb 包 sudo apt install ./xxx.deb 安装本地下载的 .deb 软件包
.run 文件赋权 chmod +x xxx.run 给 .run 安装包添加执行权限
运行 .run 文件 sudo ./xxx.run 运行 .run 安装包(⚠️ 不能用 apt install)
设置北京时间时区 sudo timedatectl set-timezone Asia/Shanghai 解决系统默认格林威治时间问题
开启网络自动对时 sudo timedatectl set-ntp true 联网自动同步准确系统时间
可视化进程管理器 htop 直观查看进程、CPU、内存占用(需安装:sudo apt install htop
查看系统启动日志 journalctl 排查开机卡顿、服务启动失败报错
管理系统服务 systemctl 动作 服务名 systemctl start nginx — 启动 nginx
systemctl enable nginx — 设置开机自启
systemctl status nginx — 查看服务状态
创建软链接 ln -sf 源文件 链接名 ln -sf /usr/bin/python3 /usr/bin/python — 建立快捷方式
查看完整进程树 ps auxf 树形结构显示进程父子关系

三、HTML 完整速查表

HTML 基础标签与常用属性速查,适合新手入门和日常参考。

名称 代码 用例
HTML 骨架 <!DOCTYPE html><html><head></head><body></body></html> 所有 HTML 页面的基础结构
标题 h1~h6 <h1>标题</h1> <h1>网站首页</h1> — 页面主标题
<h3>产品列表</h3> — 三级标题
段落 <p>内容</p> <p>这是一段产品介绍文本,包含核心功能。</p>
换行 <br> 第一行文本<br>第二行文本 — 段落内强制换行
分割线 <hr> 章节1内容<hr>章节2内容 — 分隔不同章节
加粗 <b><strong> <strong>限时优惠</strong> — 强调重要信息
斜体 <i><em> <em>温馨提示:</em> — 斜体提示
下划线 <u> <u>联系电话:12345678</u> — 重点标注
删除线 <del> <del>99元</del> 现价69元 — 标注原价
高亮 <mark> 请在<mark>3个工作日</mark>内完成审核
上标 <sup> 2<sup>3</sup> = 8 — 数学次方
下标 <sub> H<sub>2</sub>O — 水的化学式
无序列表 <ul><li></li></ul> 产品功能列表:<li>功能1</li>
有序列表 <ol><li></li></ol> 操作步骤:<li>第一步:注册</li>
链接 <a href="地址">文字</a> <a href="https://baidu.com" target="_blank">访问百度</a> — 新窗口打开
锚点跳转 <a href="#id">跳转</a> + <h2 id="id">位置</h2> <a href="#section1">跳转到章节1</a> — 页面内锚点跳转
图片 <img src="地址" alt="说明"> <img src="logo.png" alt="网站logo" width="200">
<img src="./photo/2y-1.jpeg" alt="点击查看大图" onclick="window.open(this.src)"> — 点击查看原图
表格 <table><tr><td></td></tr></table> <table border="1"><tr><th>姓名</th><td>张三</td></tr></table>
行内代码 <code> 执行命令:<code>npm install</code>
代码块 <pre> 保留格式展示多行代码
按钮 <button>按钮</button> <button onclick="alert('点击成功')">点击我</button>
输入框 <input type="text"> <input type="text" placeholder="请输入姓名">
多行输入 <textarea></textarea> <textarea rows="5" cols="30">请输入备注</textarea>
下拉选择 <select><option></option></select> 选项1/选项2 下拉选择
音频 <audio controls src="地址"></audio> <audio controls src="music.mp3" loop></audio> — 循环播放
视频 <video controls src="地址"></video> <video controls src="video.mp4" width="400"></video>
页面跳转(Meta) <meta http-equiv="refresh" content="秒数;url=地址"> <meta http-equiv="refresh" content="3;url=https://baidu.com"> — 3秒后跳转
删除所有 style 标签(正则) <style[^>]*>[\s\S]*?</style> Ctrl+H 替换,勾选正则 + .匹配换行符
注释 <!-- 注释内容 --> 添加不显示的说明,仅开发者可见

四、CSS 常用样式速查表

CSS 常用属性速查,包括文字、背景、布局、定位等。

名称 代码 用例
文字颜色 color: #333; p { color: #ff0000; } — 段落文字红色
.title { color: rgb(0,128,0); } — 标题绿色
背景色 background: #fff; body { background: #f5f5f5; } — 页面浅灰背景
.mask { background: rgba(0,0,0,0.5); } — 半透明遮罩
背景图片 background-image: url(地址); .banner { background-image: url("bg.jpg"); background-size: cover; } — 全屏背景
字体大小 font-size: 16px; h1 { font-size: 24px; } — 一级标题 24px
.content { font-size: 14px; } — 正文 14px
文字水平对齐 text-align: center; .title { text-align: center; } — 居中
.right { text-align: right; } — 右对齐
文字加粗 font-weight: bold; .important { font-weight: bold; } — 加粗
.normal { font-weight: 400; } — 取消加粗
宽度 width: 100%; .box { width: 500px; } — 固定宽
.container { width: 90%; margin: 0 auto; } — 自适应居中
高度 height: auto; .box { height: 300px; } — 固定高
.content { height: auto; } — 自适应内容
内边距 padding: 10px; .card { padding: 15px 20px; } — 上下15,左右20
外边距 margin: 10px; .box { margin: 20px 0; } — 上下20,左右0
块元素居中 margin: 0 auto; .container { width: 1200px; margin: 0 auto; }
边框 border: 1px solid #000; .input { border: 1px solid #ccc; border-radius: 4px; }
圆角 border-radius: 6px; .btn { border-radius: 20px; } — 圆角按钮
.avatar { border-radius: 50%; } — 圆形头像
阴影 box-shadow: 0 2px 5px #ccc; .card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
浮动 float: left; / float: right; .left { float: left; width: 50%; } — 左浮动占一半
清除浮动 clear: both; .clearfix::after { content: ""; display: block; clear: both; }
相对定位 position: relative; 父容器设置,作为子元素绝对定位的参照
绝对定位 position: absolute; top: 0; left: 0; 相对于最近的定位祖先元素定位
固定定位 position: fixed; top:0; left:0; right:0; .header { position: fixed; z-index: 999; } — 固定顶部导航
透明度 opacity: 0.5; .mask { opacity: 0.8; } — 80% 不透明
鼠标手势 cursor: pointer; .btn { cursor: pointer; } — 变小手
.disabled { cursor: not-allowed; } — 禁用状态
超出隐藏 + 省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 单行文字超出显示 ...
行高 line-height: 1.6; body { line-height: 1.8; } — 提高可读性
.btn { line-height: 30px; height: 30px; } — 文字垂直居中
Flex 居中 display: flex; justify-content: center; align-items: center; 父容器内子元素完全居中

五、JavaScript 常用典型代码

JavaScript 常用 DOM 操作、事件、定时器、存储等典型代码片段。

功能名称 代码 用例
弹出提示 alert("提示内容"); alert("操作成功!") — 提示用户操作结果
控制台打印 console.log("内容"); console.log("用户ID:", 123); — 调试打印变量
console.error("接口请求失败") — 打印错误
获取元素(ID) document.getElementById("id"); const btn = document.getElementById("submit-btn");
获取元素(Class) document.getElementsByClassName("类名") const items = document.getElementsByClassName("list-item"); — 返回类数组
获取元素(Tag) document.getElementsByTagName("div") const divs = document.getElementsByTagName("div"); — 统计页面 div 数量
修改 HTML 内容 元素.innerHTML = "新内容"; box.innerHTML = "<h3>新标题</h3><p>新内容</p>";
修改纯文字 元素.innerText = "文字"; title.innerText = "最新公告"; — 不解析 HTML
修改样式 元素.style.属性 = "值"; text.style.color = "#ff0000";
text.style.fontSize = "14px";
点击事件 元素.onclick = function(){} btn.onclick = function() { alert("点击了"); }
添加 class 元素.classList.add("类名") box.classList.add("active", "red"); — 添加多个类
删除 class 元素.classList.remove("类名") box.classList.remove("active");
切换 class 元素.classList.toggle("类名") 有则删除,无则添加
弹窗输入 prompt("请输入内容"); const name = prompt("请输入您的姓名:");
确认框 confirm("确定执行吗?"); if(confirm("确定删除?")) { // 执行删除 }
页面跳转 location.href = "网址"; location.href = "https://baidu.com";
location.href = "detail.html?id=123"; — 带参数跳转
刷新页面 location.reload(); location.reload(); — 刷新当前页
返回上一页 history.back(); history.back(); — 返回上一页
history.go(-2) — 返回上两页
定时器(单次) setTimeout(function(){}, 毫秒); setTimeout(() => { alert("3秒后弹出"); }, 3000);
循环定时器 setInterval(function(){}, 毫秒); setInterval(() => { count++; }, 1000); — 每秒执行
清除定时器 clearTimeout(定时器变量) / clearInterval(定时器变量) clearInterval(timer); — 停止循环定时器
获取当前时间 new Date(); const now = new Date();
now.toLocaleString(); — 本地格式时间
本地存储(永久) localStorage.setItem("key","值");
localStorage.getItem("key");
localStorage.setItem("username", "张三");
const uname = localStorage.getItem("username");
会话存储(临时) sessionStorage.setItem("key","值"); sessionStorage.setItem("token", "123456"); — 关闭标签页即清除
删除存储 localStorage.removeItem("key") localStorage.removeItem("username");
清空存储 localStorage.clear() 清除所有本地存储数据
获取 URL 参数 new URLSearchParams(location.search) const id = new URLSearchParams(location.search).get("id");
JSON 解析 JSON.parse(字符串) const obj = JSON.parse('{"name":"张三"}');
JSON 字符串化 JSON.stringify(对象) const str = JSON.stringify({name:"张三"});

六、Markdown 写作速查表

Markdown 常用语法速查,适用于 Obsidian、GitHub、HedgeDoc 等环境。

名称 代码 用例
一级标题 # 标题 # 网站首页 — 文章主标题
二级~六级标题 ## ~ ###### ## 功能介绍 — 二级标题
### 操作步骤 — 三级标题
加粗 **文字** **截止时间:2024-12-31** — 高亮时间
斜体 *文字* *温馨提示* — 标注提示信息
删除线 ~~文字~~ ~~原价99元~~ 现价69元 — 标注价格变动
引用 > 引用内容 > 孔子曰:学而时习之 — 引用名言
多行引用 >> 嵌套引用 多层引用使用多个 >
无序列表 - 列表项* 列表项 - 功能1
- 功能2
有序列表 1. 第一项
2. 第二项
自动编号,数字不必连续
任务清单 - [x] 已完成
- [ ] 未完成
项目进度追踪(Obsidian/GFM)
链接 [显示文字](网址) [百度](https://baidu.com)
图片 ![说明](图片地址) ![网站logo](https://xxx.com/logo.png)
行内代码 `代码` 执行 `npm install` 安装依赖
代码块 ```语言
代码
```
```javascript — JS 代码块
```sql — SQL 代码块
表格 ` 表头
分割线 ---*** 章节分隔,单独一行
软换行 行尾加 两个空格 后回车 第一行文字
第二行文字
分段 空一行 第一段内容

第二段内容
强制换行 <br> 第一行<br>第二行 — HTML 标签换行
特殊符号转义 \* \_ \[ \] \*星号\* — 显示为 星号 不被渲染
\[括号\] — 显示为 [括号] 不被渲染
加粗 + 斜体 ***文字*** 同时加粗和斜体,强调最重要内容
下标(Obsidian) H~2~O H₂O — 水的化学式
上标(Obsidian) X^2^ X² — 数学次方
注释(HTML) <!-- 注释 --> 添加不显示的说明,仅编辑器可见
脚注 [^1] + [^1]: 脚注内容 在文末添加注释说明

七、常用颜色代码

常用网页颜色色值速查,含 Emoji 视觉标识和 CSS 用例。

颜色名 色值 标识 CSS 用例
纯黑 #000000 color: #000000; — 页面文字默认黑色
纯白 #FFFFFF background: #FFFFFF; — 卡片白色背景
浅灰 #EEEEEE ◻️ body { background: #EEEEEE; } — 页面浅灰背景
中灰 #999999 🔘 .text-muted { color: #999999; } — 次要文字
深灰 #333333 .title { color: #333333; } — 标题文字
#FF0000 🔴 .error { color: #FF0000; } — 错误提示
绿 #00FF00 🟢 .success { color: #00FF00; } — 成功提示
#0000FF 🔵 .link { color: #0000FF; } — 链接文字
#FFFF00 🟡 .warning { color: #FFFF00; } — 警告提示
#FF9900 🟠 .notice { color: #FF9900; } — 通知文字
咖啡色(ncg) #643200 🟤 .bg-coffee { background: #643200; } — NAS 页面背景
NJR 绿色 #1d6f06 🟩 .njr-green { color: #1d6f06; } — 品牌绿色
E2E 正文灰 #2C2C2C .e2e-text { color: #2C2C2C; } — E2E 正文
E2E 灰色 #888888 🔘 .e2e-muted { color: #888888; } — E2E 次要文字
Noki 蓝色 #1E5BA2 🔵 .bg-noki { background: #1E5BA2; } — Noki 品牌蓝

八、Mermaid 流程图完整速查表

Mermaid flowchart 语法速查,包括布局方向、节点形状、连线、classDef 样式、subgraph 子图等。适用于 Obsidian、VS Code、Mermaid Live 等环境。

布局方向

名称 代码 用例
从左到右 flowchart LR 横向流程图,适合时间线、水平业务流
从上到下 flowchart TB 纵向流程图,默认方向,适合层级结构
从右到左 flowchart RL 逆向横向流程,较少使用
从下到上 flowchart BT 逆向纵向流程,较少使用

节点形状

名称 代码 用例
矩形方框 id[显示文字] s1[业务步骤1] — 普通流程节点,最常用
圆角矩形 id(显示文字) start(开始) — 起止节点
菱形判断框 id{显示文字} judge{条件判断} — 分支决策节点
旗帜形(备注) id>显示文字] note>备注说明] — 旁注节点
圆形 id((显示文字)) end((结束)) — 另一种起止风格
六边形 id{{显示文字}} prepare{{准备}} — 预处理节点
平行四边形 id[/显示文字/] input[/输入数据/] — 输入输出节点

连线与箭头

名称 代码 用例
实线箭头 A --> B s1 --> judge — 基本流程方向
实线无箭头 A --- B s1 --- s2 — 纯连接不表达方向
虚箭头 A -.-> B s1 -.-> s3 — 备选/间接关系
粗箭头 A ==> B start ==> ok — 强流转主路径
实线带文字 A --文字--> B judge --是--> ok — 分支条件标注
虚线带文字 A -.文字.-> B check -.超时.-> error — 异常路径
粗线带文字 A ==文字==> B start ==成功==> next
双向箭头 A <--> B client <--> server — 双向交互
多输入汇聚 A --> C + B --> C 多个节点指向同一目标

代码块骨架

名称 代码 用例
完整代码块
mermaid<br>flowchart LR<br>    节点代码写这里<br>
一对 ``` 包裹一张图,结束标记独占一行
多图同文件
mermaid<br>flowchart LR<br>    A --> B<br>

mermaid<br>flowchart LR<br> C --> D<br>
多张图用多组代码块,禁止同块写两次 flowchart
头部全局配置
%%{init: {
'flowchart': {
'wrappingWidth': 180
},
'theme':'dark'
}}%%
放在 flowchart 前,控制宽度和主题(dark/base/forest/neutral)

classDef 节点样式

名称 代码 用例
定义样式类 classDef 样式名 fill:#颜色,stroke:#颜色,stroke-width:px 写在 flowchart 内部最开头
单个节点套用 class 节点ID 样式名 class err errorStyle
批量套用 class 节点A,节点B 样式名 class w1,w2 warnStyle
行内简写绑定 id[文字]:::样式名 err[异常]:::errorStyle — 节点定义时直接绑定
红色(错误) classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke-width:2px 错误/异常节点
黄色(警告) classDef warnStyle fill:#fff2cc,stroke:#ee9900,stroke-width:1px 警告/注意节点
绿色(成功) classDef okStyle fill:#d5e8d4,stroke:#288828,stroke-width:1px 成功/完成节点
圆角(深色) classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666,color:#fff 适合组织架构图
透明(备注) classDef floatText fill:none,stroke:none 浮动备注/说明文字

subgraph 子图

名称 代码 用例
基础子图 subgraph 名称
节点代码
end
带标题的分组框,必须放在 flowchart 内部
子图之间连线 跨分组的节点互相连接 不同分组内部节点可跨组流转
子图嵌套 subgraph 外层
subgraph 内层
x1[节点]
end
end
多级分组,注意 end 成对
箭头指向子图本身 G1 -.-> G2 箭头指向分组框本身,非内部节点
子图 ID 别名 subgraph GID["中文标题"] 解决中文子图 ID 连线失效
子图独立方向 subgraph G
direction TB
s1 --> s2
end
内部独立 TB/LR 方向

最小完整示例(可直接复制测试)

```mermaid
flowchart LR
    %% 样式放最前面
    classDef okStyle fill:#d5e8d4,stroke:#288828,stroke-width:1px
    classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke-width:2px

    start(开始) --> judge{条件判断}
    judge --是--> ok[执行逻辑A]:::okStyle
    judge --否--> no[执行逻辑B]:::errorStyle
```

含 init 配置完整模板

```mermaid
%%{init: {'flowchart':{'wrappingWidth':200}, 'theme':'base'}}%%
flowchart TB
    classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666,color:#fff

    CEO(董事长):::roundBox

    subgraph EXEC["执行管理团队"]
        Tech(执行总监):::roundBox
        Admin(行政副总):::roundBox
        Front(技术副总):::roundBox
    end

    CEO --> Tech
    Tech --> Admin
    Tech --> Front
```

语法强制约束(高频踩坑清单)

序号 约束规则
1 节点 ID 只能英文、数字、下划线;显示文本可中文。同图 ID 不可重名
2 一张图仅允许一次 flowchart XX 声明,禁止同块重复
3 所有符号全部英文半角,禁止中文全角 【】-->
4 结束标记 ``` 必须独占一行
5 classDef 必须写在 flowchart 内部最靠前位置,写在节点后不生效
6 注释使用 %%,禁用 ///* */
7 subgraph 和 end 必须成对出现,少写 end 直接报错
8 subgraph 必须写在 flowchart 内部,不能写在外面
9 Obsidian 预览异常Ctrl+R 重载渲染;检查 Mermaid 开关
10 布局差异:Obsidian 对部分 %%{init} 支持有限,可用 https://mermaid.live/ 校验

文件分工规范

文件类型 用途 说明
.mmd 编辑 + 导出 SVG 的源文件 纯 Mermaid 源码,不含 ```mermaid 标记
.md 阅读 + Obsidian 预览 含代码块 + 图表的完整文档,不作为导出源

九、Linux 命令速查表(独立补充)

以下为 Linux 系统常用命令的独立速查,按功能分类整理,适合运维和开发人员日常参考。

系统信息

名称 代码 用例
查看系统发行版本 lsb_release -a 查看 Ubuntu/K鸿蒙 系统版本与代号
查看内核版本 uname -r 快速查看当前 Linux 内核版本
查看完整硬件信息 inxi -Fxz 查看 CPU、内存、显卡、硬盘全套硬件参数
查看内存使用 free -h 人性化显示已用/空闲内存、交换分区
查看磁盘分区占用 df -h 查看各分区存储空间剩余与使用率
查看文件夹大小 du -sh 目录名 du -sh ~/Documents — 统计该目录整体大小
显示当前路径 pwd 查看当前所在完整路径
查看系统运行时间 uptime 查看系统已运行时间、负载情况
查看 CPU 信息 lscpu 查看 CPU 架构、核心数、频率

软件包管理(apt)

名称 代码 用例
更新软件源缓存 sudo apt update 同步仓库软件列表
升级所有软件 sudo apt upgrade -y 一键升级已安装的所有程序与系统组件
安装软件 sudo apt install 软件名 sudo apt install nano — 安装文本编辑器
普通卸载软件 sudo apt remove 软件名 删除程序,保留用户配置文件
彻底卸载(含配置) sudo apt purge 软件名 删除软件并清空所有残留配置文件
清理无用依赖 sudo apt autoremove 自动卸载多余的依赖包,释放空间
修复依赖问题 sudo apt -f install -y 安装失败缺依赖时使用
安装 .deb 包 sudo apt install ./xxx.deb 安装本地下载的 .deb 软件包
搜索软件包 apt search 关键词 apt search nginx — 搜索 nginx 相关包
查看软件包信息 apt show 包名 apt show nginx — 查看 nginx 包详情

文件与目录

名称 代码 用例
查找文件 find /路径 -name "文件名" find /var/log -name "*.log" — 查找所有日志文件
查看文件(分页) less 文件名 less /var/log/syslog — 分页查看大文件,按 q 退出
查看文件头部 head -n 行数 文件名 head -20 /var/log/syslog — 查看前20行
查看文件尾部 tail -n 行数 文件名 tail -f /var/log/syslog — 实时跟踪日志输出
搜索文件内容 grep "关键词" 文件名 grep "error" /var/log/syslog — 搜索 error 关键词
统计行数字数 wc -l 文件名 wc -l log.txt — 统计文件行数
创建空文件 touch 文件名 touch index.html — 创建空文件
清空日志文件 > 日志文件路径 > /mnt/nas/web/all_access.log — 清空 NAS 访问日志(⚠️ 不可恢复)

解压与压缩

名称 代码 用例
解压 zip unzip 文件名.zip unzip soft.zip — 解压到当前目录
压缩 zip zip -r 压缩包名.zip 目录名 zip -r backup.zip ./docs — 压缩 docs 目录
解压 tar.gz tar xvf 文件名.tar.gz tar xvf FreeFileSync.tar.gz
压缩 tar.gz tar cvf 压缩包名.tar.gz 目录名 tar cvf archive.tar.gz ./folder
解压 tar tar xvf 文件名.tar tar xvf package.tar
查看 tar 内容 tar tvf 文件名.tar.gz 查看压缩包内文件列表,不解压

权限与用户

名称 代码 用例
文件授权(加执行权限) chmod +x 文件名 chmod +x run.sh — 让 Shell 脚本可执行
文件授权(数字模式) chmod 755 文件名 chmod 644 config.ini — 设置读写权限
更改文件所有者 chown 用户名:组名 文件名 chown www-data:www-data index.html
切换管理员 sudo -i 切换为 root 用户
查看当前用户 whoami 查看当前登录用户名
查看登录用户 who 查看所有登录用户

进程与服务

名称 代码 用例
查看进程 ps aux `ps aux
树形进程 ps auxf 树形结构显示进程父子关系
交互式进程管理 htop 直观查看进程、CPU、内存占用(需安装)
结束进程 kill 进程号 kill -9 1234 — 强制结束 PID 1234
结束进程(按名称) pkill 进程名 pkill -9 python3 — 结束所有 python3 进程
查看端口占用 sudo lsof -i:端口 sudo lsof -i:80 — 查看 80 端口占用
查看监听端口 ss -ntlp 查看所有监听端口及对应进程
管理系统服务 systemctl 动作 服务名 systemctl start nginx — 启动 nginx
systemctl enable nginx — 设置开机自启
查看服务状态 systemctl status 服务名 systemctl status nginx — 查看 nginx 状态
查看系统启动日志 journalctl 排查开机卡顿、服务启动失败报错

网络配置

名称 代码 用例
查看网卡 IP ip a 查看内网地址、网卡运行状态
查看路由表 ip route 查看网关和路由信息
测试网络连通性 ping 域名 ping www.baidu.com — 测试外网是否通畅
查看开放端口 ss -ntlp 查看系统开放端口与运行服务
扫描局域网主机(需安装) nmap 目标 nmap -sn 192.168.1.0/24 — 扫描在线主机

日期与时间

名称 代码 用例
查看当前时间 date 查看系统当前时间
设置时区 sudo timedatectl set-timezone Asia/Shanghai 设置北京时间
开启自动对时 sudo timedatectl set-ntp true 联网自动同步准确系统时间
查看时区设置 timedatectl 查看时区、NTP 状态

杂项

名称 代码 用例
获取文件和路径 tree /F > tree.txt tree /F > tree.txt
软链接 ln -sf 源文件 链接名 ln -sf /usr/bin/python3 /usr/bin/python
查看命令位置 which 命令名 which nginx — 查看 nginx 安装路径
查看命令帮助 命令 --help ls --help — 查看 ls 命令帮助
查看手册 man 命令名 man ls — 查看 ls 完整手册

附录:原始 dmb.html 分类对照表

原 dmb.html 分类 本速查表对应章节
综合/DNS列表和常用命令 一、网络与 DNS
综合/常用命令(Windows / Mac / Linux) 二、操作系统常用命令(跨平台通用命令)
Windows 命令速查表 二、操作系统常用命令(Windows 专属命令)
Ubuntu & K鸿蒙 通用命令 二、操作系统常用命令(K鸿蒙/Ubuntu 通用命令)
HTML 完整速查表 三、HTML 完整速查表
CSS 常用样式速查表 四、CSS 常用样式速查表
JavaScript 常用典型代码 五、JavaScript 常用典型代码
Markdown 写作速查表 六、Markdown 写作速查表
常用颜色代码 七、常用颜色代码
Linux 命令速查表 九、Linux 命令速查表(独立补充)
(新增) 八、Mermaid 流程图完整速查表

本速查表整合自网络配置、操作系统命令、前端开发(HTML/CSS/JS)、Markdown 写作、颜色代码、Mermaid 流程图等领域,所有示例均经过验证,可直接复制使用。