阅山

  • WIN
    • CSharp
    • JAVA
    • OAM
    • DirectX
    • Emgucv
  • UNIX
    • FFmpeg
    • QT
    • Python
    • Opencv
    • Openwrt
    • Twisted
    • Design Patterns
    • Mysql
    • Mycat
    • MariaDB
    • Make
    • OAM
    • Supervisor
    • Nginx
    • KVM
    • Docker
    • OpenStack
  • WEB
    • ASP
    • Node.js
    • PHP
    • Directadmin
    • Openssl
    • Regex
  • APP
    • Android
  • AI
    • Algorithm
    • Deep Learning
    • Machine Learning
  • IOT
    • Device
    • MSP430
  • DIY
    • Algorithm
    • Design Patterns
    • MATH
    • X98 AIR 3G
    • Tucao
    • fun
  • LIFE
    • 美食
    • 关于我
  • LINKS
  • ME
Claves
阅山笑看风云起,意气扬帆向日辉
  1. 首页
  2. AI
  3. LLM
  4. 正文

Next AI做图draw.io实践

2026-06-17

DayuanJiang/next-ai-draw-io: A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.




常见技术图类型:系统架构图、功能架构图、网络拓扑图、部署图、业务流程图/流程图、功能模块图、项目管理甘特图、里程碑图、组织结构图、接口关系图、安全架构图、技术路线图、拓扑图(容灾、网络)、软件架构分层图。

整体配色严格遵循以下体系,仅使用规定的色彩,保持专业科技感与克制:

【主色 - 品牌蓝】
- 深蓝 #2B5BCC (核心模块高亮、标题栏、侧边栏、重点按钮,配白色文字)
- 中蓝 #4A76D8 (次重点模块背景、卡片边框、高亮文字)
- 浅蓝 #6B94E8 (辅助按钮、标签背景、次要高亮元素)

【辅助蓝色 - 背景与分隔】
- 辅助蓝1 #E8F0FF (模块背景、卡片浅底色)
- 辅助蓝2 #D4E2FF (分隔线、边框、hover状态背景)

【中性色 - 文字与层级】
- 背景白 #FFFFFF (页面主背景、卡片底色)
- 浅灰1 #F5F7FA (模块背景、次要卡片底色)
- 浅灰2 #E5E7EB (分隔线、边框、次要文字背景)
- 深灰 #333333 (正文,用于浅色背景上的文字)
- 中灰 #666666 (次要说明文字)
- 浅灰 #999999 (非重点注释)

【功能色】


--成功绿(正常/已完成状态)--
- 主绿 #10B981 (状态圆点、成功图标,配白色文字)
- 浅绿 #D1FAE5 (状态底色)
- 浅浅绿 #ECFDF5 (极浅底色,表格行区分)

--警示橙(待处理/警告)--
- 主橙 #F59E0B (警告图标、标记)
- 浅橙 #FEF3C7 (警示条背景)
- 浅浅橙 #FFFBEB (极浅警示区底色)

--信息青(进行中/信息提示/链接)--
- 主青 #0EA5E9 (信息图标、进行中状态圆点、链接文字,配白色文字)
- 浅青 #E0F2FE (信息条背景、标签底色)
- 浅浅青 #F0F9FF (极浅底色,用于区分信息区块)

--科技紫(拓展能力、辅助平台)--
- 主紫 #7C3AED (辅助模块标题、图标高亮,配白色文字)
- 浅紫 #EDE9FE (模块背景、标签底色)
- 浅浅紫 #F5F3FF (卡片内分隔区块)

【使用规则】


- 同一张架构图中激活使用的功能色系(不含蓝色)建议不超过三种,保持沉稳,避免花哨。
- 文字对比:深色背景(深蓝、中蓝、主紫、主绿、主青、主红)上使用白色文字;浅色/白色背景上使用深灰 #333333;在深色背景上可用白色。
- 大部分的图形背景填充色建议用浅色或白色,少部分背景色可以用深色,避免打印后看不清。
- 背景保持纯白,严禁渐变和外部边框。
- 图形元素统一采用直角或微圆角(圆角半径不超过4px),避免大圆角,以保持硬朗、专业的科技感。
- 图都是用于PPT或docx配图,因此长宽比差异不要太大,控制在1.29倍以内。
- 图中的文字,切勿使用<b><br><font>等html标签,因为在draw mcp中不支持。
- 请重复计算图形和文字的位置是否正确,避免文字、图形出现在错误的位置。

pencil mcp试用。

软件系统原型设计风格规范:

【产品类型】
工业物联网 / MES / PHM / 企业内部管理系统

【整体设计风格】
- 参考飞书(Lark)+ Ant Design Pro 风格
- 现代、专业、克制(避免娱乐化设计)
- 强调信息层级与可读性
- 卡片化布局 + 表格高密度信息结合
- 视觉简洁

【布局规范】
- 使用 8px Grid System
- 页面结构:顶部导航 + 左侧菜单 + 内容区
- 内容区采用卡片(Card)分块组织
- 表格优先用于数据密集区域
- 表单使用分组(Section)布局

【颜色系统】
主色(Primary):
- #2F54EB(默认)或 #3370FF(偏飞书风格)

中性色:
- 标题:#1f1f1f
- 正文:#595959
- 次级文本:#8c8c8c
- 边框:#e5e6eb
- 页面背景:#f5f7fa
- 卡片背景:#ffffff

功能色:
- 成功:#00b96b
- 警告:#faad14
- 错误:#f5222d
- 信息:#1677ff

扩展色(用于图表):
- 青色:#36cfc9
- 紫色:#9254de
- 橙色:#ff7a45

【字体规范】
- 字号层级:12 / 14 / 16 / 20 / 24
- 标题加粗(600)
- 正文常规(400)

【组件规范】
- 按 Ant Design 风格设计组件
- 按钮:主按钮(Primary)、次按钮(Default)、危险按钮(Danger)
- 表格:支持排序、筛选、分页
- 表单:标签左对齐,间距统一
- 卡片:圆角 6px,带轻微阴影

【交互要求】
- 所有按钮具备 hover / active 状态
- 表格行 hover 高亮
- 操作具备反馈(loading / success / error)

【设计原则】
- 信息优先(Information First)
- 控制视觉噪音
- 避免过度渐变
- 避免复杂装饰
标签: 暂无
最后更新:2026-06-25

阅山

知之为知之 不知为不知

点赞
< 上一篇

COPYRIGHT © 2099 登峰造极境. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蜀ICP备14031139号-5

川公网安备51012202000587号