技术文章插图美化指南 本文档总结了技术文章中美化图表的完整流程、配色标准和最佳实践。
核心原则 1. 视觉清晰度优先 所有图表文字必须使用白色(#ffffff),确保在彩色背景上清晰可读 避免使用浅色背景上的深色文字 确保图表在移动端和桌面端都有良好的可读性 2. 配色风格统一 使用苹果风格的清新高雅配色体系 全文章保持一致的配色语言 不同类型的元素使用不同颜色,但色系要协调 3. 内容与形式并重 图表应服务于内容,而不是单纯装饰 在合适的位置添加图表,帮助读者理解复杂概念 图表应能独立传达完整信息 苹果风格配色方案 主色调 蓝色系: 主色: "#007AFF" # 苹果标准蓝 - 主要步骤、核心内容 辅色: "#5AC8FA" # 天蓝色 - 次要元素、支撑内容 绿色系: 主色: "#34C759" # 苹果绿 - 成功、完成、结果、硬件、软件 次色: "#30D158" # 深绿色 - 实现阶段 强调: "#32D74B" # 亮绿色 - 最终成果 橙色系: 主色: "#FF9500" # 苹果橙 - 警告、分析、评估 次色: "#FFCC00" # 金黄色 - 次级警告 红色系: 主色: "#FF3B30" # 苹果红 - 风险、错误、关键问题、最高等级 紫色系: 主色: "#AF52DE" # 苹果紫 - 复杂分析、中间步骤、支持过程 灰色系: 主色: "#8E8E93" # 苹果灰 - 辅助信息、参考等级 背景: "#F2F2F7" # 浅灰背景 配色应用原则 流程图:使用蓝色到绿色的渐变,表示从开始到完成 架构图:使用不同颜色区分不同模块或层级 对比图:使用对比色(如蓝vs橙、绿vs红)区分不同方案 风险图:红色表示高风险,橙色表示中风险,绿色表示安全 Mermaid图表标准 基础配置 %%{init: {'theme':'base','themeVariables': { 'fontSize':'16px', 'fontFamily':'Arial, sans-serif' }}}}%% 样式定义规范 style NodeID fill:#颜色,stroke:#边框色,stroke-width:宽度px,color:#ffffff 边框宽度规范 3px: 核心节点、起点、终点 2px: 重要节点、中间步骤 1px: 次要节点、辅助元素 文字颜色规范 所有节点文字:color:#ffffff(白色) 所有连线文字:color:#ffffff(白色) 常用图表类型模板 1. 流程图 flowchart TD Start[开始] --> Step1[步骤1描述] Step1 --> Step2[步骤2描述] Step2 --> Step3[步骤3描述] Step3 --> End[结束] style Start fill:#007AFF,stroke:#007AFF,stroke-width:3px,color:#ffffff style Step1 fill:#FF9500,stroke:#FF9500,stroke-width:2px,color:#ffffff style Step2 fill:#FFCC00,stroke:#FF9500,stroke-width:2px,color:#ffffff style Step3 fill:#34C759,stroke:#34C759,stroke-width:2px,color:#ffffff style End fill:#32D74B,stroke:#32D74B,stroke-width:3px,color:#ffffff 2. 系统架构图 graph TB subgraph 系统名称 Module1[模块1] --> Module2[模块2] Module2 --> Module3[模块3] end style Module1 fill:#007AFF,stroke:#007AFF,stroke-width:2px,color:#ffffff style Module2 fill:#34C759,stroke:#34C759,stroke-width:2px,color:#ffffff style Module3 fill:#AF52DE,stroke:#AF52DE,stroke-width:2px,color:#ffffff 3. 对比图 graph LR A[方案A] --> ResultA[结果A] B[方案B] --> ResultB[结果B] style A fill:#007AFF,stroke:#007AFF,stroke-width:2px,color:#ffffff style B fill:#FF9500,stroke:#FF9500,stroke-width:2px,color:#ffffff style ResultA fill:#34C759,stroke:#34C759,stroke-width:2px,color:#ffffff style ResultB fill:#30D158,stroke:#34C759,stroke-width:2px,color:#ffffff 4. 层级关系图 graph LR Level1[层级1] --> Level2[层级2] Level2 --> Level3[层级3] Level3 --> Level4[层级4] style Level1 fill:#FF3B30,stroke:#FF3B30,stroke-width:3px,color:#ffffff style Level2 fill:#FF9500,stroke:#FF9500,stroke-width:2px,color:#ffffff style Level3 fill:#FFCC00,stroke:#FF9500,stroke-width:2px,color:#ffffff style Level4 fill:#34C759,stroke:#34C759,stroke-width:2px,color:#ffffff 图表添加位置指南 1. 方法论部分 在介绍分析方法时,添加流程图:
...