Diagram Design IT现状图遗留系统现代化改造的第一张分析图【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design在遗留系统现代化改造项目中最容易被跳过、却又最值钱的一步是先画一张IT现状图。Diagram Design 是一个为 Claude Code 打造的图表设计技能库内置 29 种编辑级图表类型其中IT 现状图IT current-state专门用于记录改造前的遗留系统全貌它把散落在各部门、各阶段的系统按采集 → 处理 → 分发整理成一张自包含的 HTMLSVG 分析图让所有人对现状形成统一认知再谈改造。为什么改造项目的第一张图必须是 IT 现状图很多团队一上来就画目标架构图结果发现评审会上吵起来的不是目标而是现在到底是怎么回事。改造的第一步应当是照镜子现状是改造的基准线没有现状图目标图里的差距无从谈起工作量估算也失去依据。痛点需要被看见手工传文件、单点故障、缺少版本控制、全靠邮件发报表——这些摩擦在文字汇报里很容易被粉饰画出来却一目了然。给方案提供差距证据IT 现状图正是数据平台类方案如 type-dp-integration.md 描述的目标拓扑的对照物——这张图展示的就是新平台将要弥合的那道鸿沟。IT 现状图能画什么一张图装下整个遗留系统Diagram Design 的 IT 现状图是参数化类型底层由一份精简的 YAML 配置驱动你只需要描述内容坐标和排版全部自动计算。它的核心表达能力包括2~4 个阶段分区横向或纵向排列常见划分是采集 / 处理 / 分发也可以按部门前端 / 后端 / 存储或业务流程组织。每个分区 1~5 个组件每个组件可配图标、技术副标题如CAPI · PostgreSQL甚至单独着色最多 3 个自定义颜色组件。两类特殊标记focal强调色标记最多 2 个瓶颈组件external用虚线边框表示不在我们改造范围内的外部系统。文件交接标注连线上直接标出 CSV、Excel、Email、Copy 等手工交接方式一眼看清数据是怎么人肉搬运的。跨切面服务栏图底部可加 0~3 条通栏横条放身份管理、可观测性这类横跨所有阶段的关注点。如何读懂一张 IT 现状图图例与色彩语言以下面这张内置示例为例它描绘了一家零售企业改造前的报表链路——这正是标准 IT 现状图的形态读懂这张图只需要记住四组视觉语言视觉元素含义蓝色连线数据流如 CSV、EXCEL、WEB 交接红色连线痛点如手工 COPY、手工刷新橙色实线框瓶颈节点Shared Drive、Reporting Portal灰色虚线框外部系统供应商、区域经理等从左到右读一遍故事就出来了POS 和线上商城每晚导出文件 → 扔进没有版本控制的共享盘 → 分析师用 Excel 手工核对 → 再手动刷新报表门户 → 邮件打包发给区域经理。每一个手工环节都是一次改造机会。从现状到目标与数据平台集成图搭配使用IT 现状图最精彩的用法是和它的目标版——数据平台集成图DP integration放在一起讲改造故事左侧依然是数据源但中间变成了统一的数据平台编排调度、对象存储、联邦查询引擎各司其职右侧消费者通过 JDBC、HTTPS、API 等标准协议接入。对照两张图改造的叙事自然成立手工交接 → 自动编排邮件报表 → 标准接口单点瓶颈 → 平台能力。评审会上先亮现状图、再亮目标图说服力远超一页 PPT。三步快速生成你的第一张 IT 现状图第一步准备环境。在 Claude Code 中通过插件市场安装 diagram-design或在 Codex、Pi 中安装对应技能也可以克隆仓库git clone https://gitcode.com/GitHub_Trending/di/diagram-design后直接使用skills/diagram-design目录。技能本体与完整说明都在仓库内例如 SKILL.md 和 IT 现状图的完整规范 type-it-state.md。第二步用大白话描述现状。直接告诉 AI比如画一张 IT 现状图三个分区采集、处理、分发。采集有 POS 导出和供应商价格表处理有共享盘和 Excel 手工账分发有报表门户和邮件发送。共享盘和报表门户是瓶颈标注 CSV、Excel、Email 的交接。第三步微调参数。生成的 HTML 可直接双击打开若想调整改改这份精简配置即可title: Current IT Landscape zones: - name: COLLECTION components: - { id: pos, name: POS Exports, sub: nightly · CSV } - name: PROCESSING components: - { id: drive, name: Shared Drive, sub: no version control, kind: focal } - name: DISSEMINATION components: - { id: portal, name: Reporting Portal, sub: manual refresh, kind: focal }改动会立即反映在图上无需任何构建步骤。仓库还内置了可直接改用的示例文件如 example-it-state.html、暗色版 example-it-state-dark.html 和带摘要卡片的编辑版 example-it-state-full.html。一张好 IT 现状图的小规范Diagram Design 的编辑器editorial基因决定了它和随手画的框线图不一样一个强调色最多 2 个瓶颈强调色是留给读者第一眼该看的地方全图到处标红等于没标。密度控制在 4/10超过 16 个组件就拆成两张图每张图只讲一个故事。无阴影、无斜线1px 细边框、圆角连接线所有坐标按 4px 网格对齐整体干净得像杂志插图。暗色模式与导出同一份配置可自动产出暗色皮肤需要放进 PPT 或文档时可导出 SVG / PNG详见 export.md。小结改造项目不缺想法缺的是把现状讲清楚的能力。Diagram Design 的 IT 现状图让这件事变成一次对话描述、生成、微调、导出几分钟内得到一张专业级分析图。把它作为遗留系统现代化改造的第一张图你会发现后续的架构评审、差距分析和方案汇报全都变得顺畅许多。相关的配套规范与示例都在 type-it-state.md 与 type-dp-integration.md 中动手画一张试试吧。【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考