next-ai-draw-io 图形库实战gcp2 库 298 个 Google Cloud 形状的完整使用指南【免费下载链接】next-ai-draw-ioA 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.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io本指南以 docs/shape-libraries/gcp2.md 为核心系统讲解 next-ai-draw-io 内置的 gcp2 图形库如何通过mxgraph.gcp2前缀在 draw.io XML 中引用 Google Cloud 图标、全部 298 个形状的完整清单以及该文档如何在项目的 AI 图表生成工作流中通过get_shape_library工具被模型实时读取。读完本文你将能够在自然语言生成 GCP 架构图时精准选用图标并理解底层实现原理。gcp2 库概览mxgraph 体系下的 Google Cloud 图标集gcp2 是 next-ai-draw-io 形状库体系中的一个库文件核心规格如下属性值库名称gcp2类型mxgraph shapes样式前缀mxgraph.gcp2形状数量298gcp2.md 标题标注为 298README.md 索引表记录为 297两处统计略有出入覆盖范围Google Cloud Platform——Compute Engine、BigQuery、GKE、Cloud Storage、网络与负载均衡、AI/ML 等在 docs/shape-libraries/README.md 的库索引中gcp2 与 aws41031 个形状、azure2608 个形状、alibaba_cloud273 个形状并列属于云厂商图形库一族全部通过统一的styleshapemxgraph.library.shape_name引用语法接入 draw.io。全仓库共 33 个库、4,281 个形状gcp2 约占其中的 7%是覆盖 Google Cloud 产品线最全面的一个库。基本用法在 draw.io XML 中引用 GCP 形状gcp2 文档给出了最精简的引用模板mxCell valuelabel styleshapemxgraph.gcp2.{shape};fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter; vertex1 parent1 mxGeometry x0 y0 width60 height60 asgeometry / /mxCell将{shape}替换为上文的任意形状名即可例如把{shape}换成compute_engine。各样式参数含义如下shapemxgraph.gcp2.{shape}核心参数指定使用 gcp2 库中的某个形状fillColor#4285F4图标填充色#4285F4是 Google 品牌蓝与 GCP 官方图标风格一致strokeColornone去除描边让图标更干净若需要描边可改为#333333之类的色值verticalLabelPositionbottom;verticalAligntop将文本标签定位在图形下方避免遮挡图标本体aligncenter文字水平居中vertex1声明这是一个顶点形状而非边连接线parent1挂在根层 cell 之下若图标需要放进某个容器则改为对应容器 idmxGeometry控制位置与尺寸示例中为 60×60 的方形区域适合单图标展示。在 next-ai-draw-io 的实际生成流程中AI 只需要输出mxCell元素本身。根据 lib/system-prompts.ts 中的 CRITICAL RULES包装标签mxfile、mxGraphModel、root和根 cellid0、1由应用自动补齐AI 生成的 cell 从 id2 开始顺序编号且所有mxCell必须保持兄弟关系、不可相互嵌套。因此一个可直接投喂给应用渲染的 GCP 图标 cell 形如mxCell id2 valueCompute Engine styleshapemxgraph.gcp2.compute_engine;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x40 y40 width60 height60 asgeometry / /mxCell对mxCell/mxGeometry属性体系的更完整说明可参考 app/api/chat/xml_guide.md其中还覆盖了connectable、source/target边属性、容器与 swimlane 等进阶语法。298 个形状完整清单文档正文按字母序列出了全部 298 个形状。为便于按用途检索本文将其按 Google Cloud 产品线主题重新分组组内仍按字母序298 个全部覆盖无遗漏计算与虚拟机29a7_power、app_engine、app_engine_icon、cloud_computer、cloud_functions、cloud_run、cloud_server、cloud_tpu、cluster、compute_engine、compute_engine_2、compute_engine_icon、dedicated_game_server、game、gpu、legacy_cloud、legacy_cloud_2、mem_instances、modifiers_autoscaling、modifiers_custom_virtual_machine、modifiers_high_cpu_machine、modifiers_high_memory_machine、modifiers_preemptable_vm、modifiers_shared_core_machine_f1、modifiers_shared_core_machine_g1、modifiers_standard_machine、modifiers_storage、node这一组覆盖 Compute Engine 生态compute_engine系图标用于 VM 实例modifiers_*是一组修饰角标形状自动扩缩、自定义机型、高 CPU/高内存、抢占式 VM、共享核心机型等适合叠加在实例图标上表达规格特性。容器与编排14cloud_service_mesh、container_builder、container_engine、container_engine_icon、container_optimized_os、container_registry、gke_on_prem、istio_logo、kubernetes_logo、kubernetes_name、replication_controller、replication_controller_2、replication_controller_3、traffic_director绘制 GKE 集群、服务网格Istio或混合云 K8s 架构时从container_engine、kubernetes_logo入手traffic_director可用于表示流量治理层。存储与数据库27big_query、bigquery、bucket、bucket_scale、cloud_bigtable、cloud_datastore、cloud_filestore、cloud_firestore、cloud_memorystore、cloud_spanner、cloud_sql、cloud_storage、data_storage_cost、database、database_2、database_3、database_cycle、database_speed、database_uploading、files、folders、memcache、persistent_disk、persistent_disk_snapshot、storage、virtual_file_system注意big_query与bigquery是两个同时存在的形状视觉形态略有差异可分别试用以选择更贴合的样式database、database_2、database_3则提供三种通用数据库图标变体。网络与负载均衡29cloud_cdn、cloud_dns、cloud_external_ip_addresses、cloud_firewall_rules、cloud_load_balancing、cloud_nat、cloud_network、cloud_router、cloud_routes、cloud_vpn、dedicated_interconnect、fastly、gateway、gateway_icon、google_network、google_network_edge_cache、https_load_balancer、internet_connection、load_balancing、nat、network、network_load_balancer、partner_interconnect、premium_network_tier、squid_proxy、standard_network_tier、virtual_private_cloud、vpn、vpn_gatewayVPC 架构图的常用组合virtual_private_cloud作容器内部放置cloud_load_balancing、compute_engine、cloud_sql出口挂cloud_nat与cloud_router边界用cloud_firewall_rules与cloud_armor见安全组表示防护。数据分析与流处理27anomaly_detection、api_analytics、cloud_composer、cloud_connected_insight、cloud_data_catalog、cloud_data_fusion、cloud_dataflow、cloud_dataflow_icon、cloud_datalab、cloud_dataprep、cloud_dataproc、cloud_dataproc_icon、cloud_pubsub、cloud_scheduler、cloud_sub_pub、cloud_tasks、data_access、data_increase、data_studio、genomics、lifecycle、maps_api、scheduled_tasks、search_api、stream、task_queues、task_queues_2数据管道典型链路cloud_pubsub消息入口→cloud_dataflow流处理→big_query分析→data_studio可视化。AI 与机器学习24advanced_solutions_lab、ai_hub、automl_natural_language、automl_tables、automl_translation、automl_video_intelligence、automl_vision、biomedical_beaker、biomedical_test_tube、biomedical_trio、cloud_automl、cloud_inference_api、cloud_machine_learning、cloud_natural_language_api、cloud_speech_api、cloud_text_to_speech、cloud_translation_api、cloud_video_intelligence_api、cloud_vision_api、dialogflow_enterprise_edition、prediction_api、recommendations_ai、tensorflow_lockup、tensorflow_logo覆盖 Vertex AI 之外的全部传统 AI/API 产品线AutoML 全家族视觉、NLP、翻译、表格、视频、五大感知 API、Dialogflow 对话机器人、推荐系统等。IoT 与边缘4beacon、cloud_iot_core、cloud_iot_edge、webcam安全与身份18beyondcorp、certified_industry_standard、cloud_armor、cloud_iam、cloud_security、cloud_security_command_center、cloud_security_scanner、data_loss_prevention_api、forseti_lockup、forseti_logo、identity_aware_proxy、key、key_management_service、lock、management_security、people_security_management、safety、security_key_enforcement可观测性与开发者工具18cloud_code、cloud_deployment_manager、cloud_endpoints、cloud_information、cloud_jobs_api、cloud_test_lab、cloud_tools_for_powershell、debugger、developer_portal、error_reporting、logging、logs_api、profiler、stackdriver、cloud_monitoring、monitor、monitor_2、trace注意stackdriver与cloud_monitoring同属可观测性主题Stackdriver 已被 Cloud Monitoring/Logging 品牌取代两个图标均可用于表达监控告警。API、集成与商业服务27admob、api_monetization、apigee_api_platform、apigee_sense、application、application_system、campaign_manager、cloud_apis、cloud_messaging、external_data_center、external_data_resource、external_payment_form、firebase、frontend_platform_services、google_ad_manager、google_ads、google_analytics、google_analytics_360、google_play_game_service、image_services、internal_payment_authorization、payment、push_notification_service、retail、service_discovery、social_media_time、transfer_appliance设备与终端6desktop、desktop_and_mobile、laptop、mobile_devices、phone、phone_android通用图标与修饰75admin_connected、arrow_cycle、arrows_system、aspect_ratio、blank、blue_hexagon、calculator、capabilities、check、check_2、check_available、check_scale、circuit_board、clock、cloud、cloud_checkmark、connected、cost、cost_arrows、cost_savings、enhance_ui、enhance_ui_2、gear、gear_arrow、gear_chain、gear_load、globe_world、google_cloud_platform、google_cloud_platform_lockup、half_cloud、increase_cost_arrows、lightbulb、list、live、loading、loading_2、loading_3、memory_card、mxgraph.gcp2、outline_blank_1、outline_blank_2、outline_blank_3、outline_highcomp、outline_highmem、placeholder、play_gear、play_start、primary、process、record、report、repository、repository_2、repository_3、repository_primary、save、scale、search、segments、segments_2、segments_overlap、servers_stacked、service、solution、speaker、speed、stacked_ownership、swap、systems_check、tape_record、thumbs_up、time_clock、users、view_list、visibility、websiteoutline_*系列outline_blank_1/2/3、outline_highcomp、outline_highmem与modifiers_*类似用于在架构图上标注资源轮廓或机型特性mxgraph.gcp2本身也是一个可用的形状条目通常是库的占位/兜底图标。源码级原理get_shape_library 工具如何把文档变成 AI 能力这份形状清单并不是给人手工查阅的静态资料而是 next-ai-draw-io 中 AI 生成图表的图标字典。整个链路在源码中清晰可见工具声明lib/system-prompts.ts 中定义了get_shape_library工具描述为获取图形/图标库文档用于在创建带特殊图标的图表前发现可用形状并明确要求模型在创建图表前 ALWAYS 调用never guess the syntax绝不猜测语法库名参数示例即包含gcp2。同样的要求也出现在系统提示的强约束里涉及云/技术图表时必须先查库再动手禁止凭空猜测图标样式语法。服务端实现app/api/chat/route.ts 中实现了get_shape_library的execute逻辑。它把用户传入的库名做小写化与正则清洗/[^a-z0-9_-]/g再拼接到docs/shape-libraries目录下读取${library}.md文件将整个 Markdown 文档也就是本文依据的 gcp2.md作为工具返回值交给模型。实现上还做了两层防护非法字符直接拒绝并用path.resolve校验拼接结果必须落在库目录之内防止路径穿越。错误处理若库文件不存在如拼写错误工具会返回一份可用库名清单aws4, azure2, gcp2, alibaba_cloud, ...引导模型修正参数重试。配合关系get_shape_library通常先于display_diagram整图生成或edit_diagram局部编辑被调用——模型先查到shapemxgraph.gcp2.compute_engine这类精确语法再将其写入待生成的mxCellstyle 中。这意味着任何一份 shape-libraries 文档的更新新增形状、修正前缀都会直接作用于 AI 的图标能力无需改动提示词或代码。实战示例用自然语言生成一张 GCP 架构图基于以上语法在 next-ai-draw-io 的聊天面板输入类似画一张 GCP 架构图用户经 HTTPS 负载均衡访问 Compute Engine后端连 Cloud SQL数据经 Pub/Sub 流入 BigQuery的描述模型会先调用get_shape_library(gcp2)确认图标语法再产出如下风格的 XMLmxCell id2 valueUsers styleshapemxgraph.gcp2.users;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x40 y40 width60 height60 asgeometry / /mxCell mxCell id3 valueHTTPS LB styleshapemxgraph.gcp2.https_load_balancer;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x220 y40 width60 height60 asgeometry / /mxCell mxCell id4 valueCompute Engine styleshapemxgraph.gcp2.compute_engine;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x400 y40 width60 height60 asgeometry / /mxCell mxCell id5 valueCloud SQL styleshapemxgraph.gcp2.cloud_sql;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x400 y200 width60 height60 asgeometry / /mxCell mxCell id6 valuePub/Sub styleshapemxgraph.gcp2.cloud_pubsub;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x580 y200 width60 height60 asgeometry / /mxCell mxCell id7 valueBigQuery styleshapemxgraph.gcp2.big_query;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x720 y200 width60 height60 asgeometry / /mxCell mxCell id8 value styleendArrowclassic;html1;exitX1;exitY0.5;entryX0;entryY0.5; edge1 parent1 source2 target3 mxGeometry relative1 asgeometry / /mxCell生成时需要遵守系统提示中的布局约束见 lib/system-prompts.ts所有元素保持在单页视口内x 0–800、y 0–600容器宽不超过 700px、高不超过 550px边必须显式声明exitX/exitY/entryX/entryY并围绕中间形状走正交路由绕行避免连线穿过图标。使用建议与注意事项先查库再生成无论使用何种云图标都应遵循系统提示的约定先调用get_shape_library以gcp2为参数获取最新形状清单避免因形状名拼写错误如big_query与bigquery并存、compute_engine与compute_engine_icon并存生成无效 style。前缀必须完整GCP 图标的前缀是mxgraph.gcp2与 AWS 库mxgraph.aws4、Azure 库img/lib/azure2/等不同混用会导致形状无法渲染。善用修饰类形状modifiers_*、outline_*、segments*、repository*这类成族形状适合表达资源规格、状态角标与层级归属能显著提升架构图的表达能力。关联文档更完整的 draw.io XML 语法见 app/api/chat/xml_guide.md全部图形库索引与各库入口见 docs/shape-libraries/README.mdGCP 演示产物可见 public/gcp_demo.svg。【免费下载链接】next-ai-draw-ioA 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.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
next-ai-draw-io 图形库实战gcp2 库 298 个 Google Cloud 形状的完整使用指南【免费下载链接】next-ai-draw-ioA 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.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io本指南以 docs/shape-libraries/gcp2.md 为核心系统讲解 next-ai-draw-io 内置的 gcp2 图形库如何通过mxgraph.gcp2前缀在 draw.io XML 中引用 Google Cloud 图标、全部 298 个形状的完整清单以及该文档如何在项目的 AI 图表生成工作流中通过get_shape_library工具被模型实时读取。读完本文你将能够在自然语言生成 GCP 架构图时精准选用图标并理解底层实现原理。gcp2 库概览mxgraph 体系下的 Google Cloud 图标集gcp2 是 next-ai-draw-io 形状库体系中的一个库文件核心规格如下属性值库名称gcp2类型mxgraph shapes样式前缀mxgraph.gcp2形状数量298gcp2.md 标题标注为 298README.md 索引表记录为 297两处统计略有出入覆盖范围Google Cloud Platform——Compute Engine、BigQuery、GKE、Cloud Storage、网络与负载均衡、AI/ML 等在 docs/shape-libraries/README.md 的库索引中gcp2 与 aws41031 个形状、azure2608 个形状、alibaba_cloud273 个形状并列属于云厂商图形库一族全部通过统一的styleshapemxgraph.library.shape_name引用语法接入 draw.io。全仓库共 33 个库、4,281 个形状gcp2 约占其中的 7%是覆盖 Google Cloud 产品线最全面的一个库。基本用法在 draw.io XML 中引用 GCP 形状gcp2 文档给出了最精简的引用模板mxCell valuelabel styleshapemxgraph.gcp2.{shape};fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter; vertex1 parent1 mxGeometry x0 y0 width60 height60 asgeometry / /mxCell将{shape}替换为上文的任意形状名即可例如把{shape}换成compute_engine。各样式参数含义如下shapemxgraph.gcp2.{shape}核心参数指定使用 gcp2 库中的某个形状fillColor#4285F4图标填充色#4285F4是 Google 品牌蓝与 GCP 官方图标风格一致strokeColornone去除描边让图标更干净若需要描边可改为#333333之类的色值verticalLabelPositionbottom;verticalAligntop将文本标签定位在图形下方避免遮挡图标本体aligncenter文字水平居中vertex1声明这是一个顶点形状而非边连接线parent1挂在根层 cell 之下若图标需要放进某个容器则改为对应容器 idmxGeometry控制位置与尺寸示例中为 60×60 的方形区域适合单图标展示。在 next-ai-draw-io 的实际生成流程中AI 只需要输出mxCell元素本身。根据 lib/system-prompts.ts 中的 CRITICAL RULES包装标签mxfile、mxGraphModel、root和根 cellid0、1由应用自动补齐AI 生成的 cell 从 id2 开始顺序编号且所有mxCell必须保持兄弟关系、不可相互嵌套。因此一个可直接投喂给应用渲染的 GCP 图标 cell 形如mxCell id2 valueCompute Engine styleshapemxgraph.gcp2.compute_engine;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x40 y40 width60 height60 asgeometry / /mxCell对mxCell/mxGeometry属性体系的更完整说明可参考 app/api/chat/xml_guide.md其中还覆盖了connectable、source/target边属性、容器与 swimlane 等进阶语法。298 个形状完整清单文档正文按字母序列出了全部 298 个形状。为便于按用途检索本文将其按 Google Cloud 产品线主题重新分组组内仍按字母序298 个全部覆盖无遗漏计算与虚拟机29a7_power、app_engine、app_engine_icon、cloud_computer、cloud_functions、cloud_run、cloud_server、cloud_tpu、cluster、compute_engine、compute_engine_2、compute_engine_icon、dedicated_game_server、game、gpu、legacy_cloud、legacy_cloud_2、mem_instances、modifiers_autoscaling、modifiers_custom_virtual_machine、modifiers_high_cpu_machine、modifiers_high_memory_machine、modifiers_preemptable_vm、modifiers_shared_core_machine_f1、modifiers_shared_core_machine_g1、modifiers_standard_machine、modifiers_storage、node这一组覆盖 Compute Engine 生态compute_engine系图标用于 VM 实例modifiers_*是一组修饰角标形状自动扩缩、自定义机型、高 CPU/高内存、抢占式 VM、共享核心机型等适合叠加在实例图标上表达规格特性。容器与编排14cloud_service_mesh、container_builder、container_engine、container_engine_icon、container_optimized_os、container_registry、gke_on_prem、istio_logo、kubernetes_logo、kubernetes_name、replication_controller、replication_controller_2、replication_controller_3、traffic_director绘制 GKE 集群、服务网格Istio或混合云 K8s 架构时从container_engine、kubernetes_logo入手traffic_director可用于表示流量治理层。存储与数据库27big_query、bigquery、bucket、bucket_scale、cloud_bigtable、cloud_datastore、cloud_filestore、cloud_firestore、cloud_memorystore、cloud_spanner、cloud_sql、cloud_storage、data_storage_cost、database、database_2、database_3、database_cycle、database_speed、database_uploading、files、folders、memcache、persistent_disk、persistent_disk_snapshot、storage、virtual_file_system注意big_query与bigquery是两个同时存在的形状视觉形态略有差异可分别试用以选择更贴合的样式database、database_2、database_3则提供三种通用数据库图标变体。网络与负载均衡29cloud_cdn、cloud_dns、cloud_external_ip_addresses、cloud_firewall_rules、cloud_load_balancing、cloud_nat、cloud_network、cloud_router、cloud_routes、cloud_vpn、dedicated_interconnect、fastly、gateway、gateway_icon、google_network、google_network_edge_cache、https_load_balancer、internet_connection、load_balancing、nat、network、network_load_balancer、partner_interconnect、premium_network_tier、squid_proxy、standard_network_tier、virtual_private_cloud、vpn、vpn_gatewayVPC 架构图的常用组合virtual_private_cloud作容器内部放置cloud_load_balancing、compute_engine、cloud_sql出口挂cloud_nat与cloud_router边界用cloud_firewall_rules与cloud_armor见安全组表示防护。数据分析与流处理27anomaly_detection、api_analytics、cloud_composer、cloud_connected_insight、cloud_data_catalog、cloud_data_fusion、cloud_dataflow、cloud_dataflow_icon、cloud_datalab、cloud_dataprep、cloud_dataproc、cloud_dataproc_icon、cloud_pubsub、cloud_scheduler、cloud_sub_pub、cloud_tasks、data_access、data_increase、data_studio、genomics、lifecycle、maps_api、scheduled_tasks、search_api、stream、task_queues、task_queues_2数据管道典型链路cloud_pubsub消息入口→cloud_dataflow流处理→big_query分析→data_studio可视化。AI 与机器学习24advanced_solutions_lab、ai_hub、automl_natural_language、automl_tables、automl_translation、automl_video_intelligence、automl_vision、biomedical_beaker、biomedical_test_tube、biomedical_trio、cloud_automl、cloud_inference_api、cloud_machine_learning、cloud_natural_language_api、cloud_speech_api、cloud_text_to_speech、cloud_translation_api、cloud_video_intelligence_api、cloud_vision_api、dialogflow_enterprise_edition、prediction_api、recommendations_ai、tensorflow_lockup、tensorflow_logo覆盖 Vertex AI 之外的全部传统 AI/API 产品线AutoML 全家族视觉、NLP、翻译、表格、视频、五大感知 API、Dialogflow 对话机器人、推荐系统等。IoT 与边缘4beacon、cloud_iot_core、cloud_iot_edge、webcam安全与身份18beyondcorp、certified_industry_standard、cloud_armor、cloud_iam、cloud_security、cloud_security_command_center、cloud_security_scanner、data_loss_prevention_api、forseti_lockup、forseti_logo、identity_aware_proxy、key、key_management_service、lock、management_security、people_security_management、safety、security_key_enforcement可观测性与开发者工具18cloud_code、cloud_deployment_manager、cloud_endpoints、cloud_information、cloud_jobs_api、cloud_test_lab、cloud_tools_for_powershell、debugger、developer_portal、error_reporting、logging、logs_api、profiler、stackdriver、cloud_monitoring、monitor、monitor_2、trace注意stackdriver与cloud_monitoring同属可观测性主题Stackdriver 已被 Cloud Monitoring/Logging 品牌取代两个图标均可用于表达监控告警。API、集成与商业服务27admob、api_monetization、apigee_api_platform、apigee_sense、application、application_system、campaign_manager、cloud_apis、cloud_messaging、external_data_center、external_data_resource、external_payment_form、firebase、frontend_platform_services、google_ad_manager、google_ads、google_analytics、google_analytics_360、google_play_game_service、image_services、internal_payment_authorization、payment、push_notification_service、retail、service_discovery、social_media_time、transfer_appliance设备与终端6desktop、desktop_and_mobile、laptop、mobile_devices、phone、phone_android通用图标与修饰75admin_connected、arrow_cycle、arrows_system、aspect_ratio、blank、blue_hexagon、calculator、capabilities、check、check_2、check_available、check_scale、circuit_board、clock、cloud、cloud_checkmark、connected、cost、cost_arrows、cost_savings、enhance_ui、enhance_ui_2、gear、gear_arrow、gear_chain、gear_load、globe_world、google_cloud_platform、google_cloud_platform_lockup、half_cloud、increase_cost_arrows、lightbulb、list、live、loading、loading_2、loading_3、memory_card、mxgraph.gcp2、outline_blank_1、outline_blank_2、outline_blank_3、outline_highcomp、outline_highmem、placeholder、play_gear、play_start、primary、process、record、report、repository、repository_2、repository_3、repository_primary、save、scale、search、segments、segments_2、segments_overlap、servers_stacked、service、solution、speaker、speed、stacked_ownership、swap、systems_check、tape_record、thumbs_up、time_clock、users、view_list、visibility、websiteoutline_*系列outline_blank_1/2/3、outline_highcomp、outline_highmem与modifiers_*类似用于在架构图上标注资源轮廓或机型特性mxgraph.gcp2本身也是一个可用的形状条目通常是库的占位/兜底图标。源码级原理get_shape_library 工具如何把文档变成 AI 能力这份形状清单并不是给人手工查阅的静态资料而是 next-ai-draw-io 中 AI 生成图表的图标字典。整个链路在源码中清晰可见工具声明lib/system-prompts.ts 中定义了get_shape_library工具描述为获取图形/图标库文档用于在创建带特殊图标的图表前发现可用形状并明确要求模型在创建图表前 ALWAYS 调用never guess the syntax绝不猜测语法库名参数示例即包含gcp2。同样的要求也出现在系统提示的强约束里涉及云/技术图表时必须先查库再动手禁止凭空猜测图标样式语法。服务端实现app/api/chat/route.ts 中实现了get_shape_library的execute逻辑。它把用户传入的库名做小写化与正则清洗/[^a-z0-9_-]/g再拼接到docs/shape-libraries目录下读取${library}.md文件将整个 Markdown 文档也就是本文依据的 gcp2.md作为工具返回值交给模型。实现上还做了两层防护非法字符直接拒绝并用path.resolve校验拼接结果必须落在库目录之内防止路径穿越。错误处理若库文件不存在如拼写错误工具会返回一份可用库名清单aws4, azure2, gcp2, alibaba_cloud, ...引导模型修正参数重试。配合关系get_shape_library通常先于display_diagram整图生成或edit_diagram局部编辑被调用——模型先查到shapemxgraph.gcp2.compute_engine这类精确语法再将其写入待生成的mxCellstyle 中。这意味着任何一份 shape-libraries 文档的更新新增形状、修正前缀都会直接作用于 AI 的图标能力无需改动提示词或代码。实战示例用自然语言生成一张 GCP 架构图基于以上语法在 next-ai-draw-io 的聊天面板输入类似画一张 GCP 架构图用户经 HTTPS 负载均衡访问 Compute Engine后端连 Cloud SQL数据经 Pub/Sub 流入 BigQuery的描述模型会先调用get_shape_library(gcp2)确认图标语法再产出如下风格的 XMLmxCell id2 valueUsers styleshapemxgraph.gcp2.users;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x40 y40 width60 height60 asgeometry / /mxCell mxCell id3 valueHTTPS LB styleshapemxgraph.gcp2.https_load_balancer;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x220 y40 width60 height60 asgeometry / /mxCell mxCell id4 valueCompute Engine styleshapemxgraph.gcp2.compute_engine;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x400 y40 width60 height60 asgeometry / /mxCell mxCell id5 valueCloud SQL styleshapemxgraph.gcp2.cloud_sql;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x400 y200 width60 height60 asgeometry / /mxCell mxCell id6 valuePub/Sub styleshapemxgraph.gcp2.cloud_pubsub;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x580 y200 width60 height60 asgeometry / /mxCell mxCell id7 valueBigQuery styleshapemxgraph.gcp2.big_query;fillColor#4285F4;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x720 y200 width60 height60 asgeometry / /mxCell mxCell id8 value styleendArrowclassic;html1;exitX1;exitY0.5;entryX0;entryY0.5; edge1 parent1 source2 target3 mxGeometry relative1 asgeometry / /mxCell生成时需要遵守系统提示中的布局约束见 lib/system-prompts.ts所有元素保持在单页视口内x 0–800、y 0–600容器宽不超过 700px、高不超过 550px边必须显式声明exitX/exitY/entryX/entryY并围绕中间形状走正交路由绕行避免连线穿过图标。使用建议与注意事项先查库再生成无论使用何种云图标都应遵循系统提示的约定先调用get_shape_library以gcp2为参数获取最新形状清单避免因形状名拼写错误如big_query与bigquery并存、compute_engine与compute_engine_icon并存生成无效 style。前缀必须完整GCP 图标的前缀是mxgraph.gcp2与 AWS 库mxgraph.aws4、Azure 库img/lib/azure2/等不同混用会导致形状无法渲染。善用修饰类形状modifiers_*、outline_*、segments*、repository*这类成族形状适合表达资源规格、状态角标与层级归属能显著提升架构图的表达能力。关联文档更完整的 draw.io XML 语法见 app/api/chat/xml_guide.md全部图形库索引与各库入口见 docs/shape-libraries/README.mdGCP 演示产物可见 public/gcp_demo.svg。【免费下载链接】next-ai-draw-ioA 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.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
