6 篇文章带有标签 “visualization”

WorkBuddy 实战案例：日常办公

WorkBuddy 介绍

全场景智能体工作搭子

开启 AI Agent 办公新范式

AI 专家团 全场景办公

WorkBuddy 是全能 AI 工作台，一人指挥，全行业专家执行，从策略到交付一站搞定

免部署·安装即用 ｜ 多专家·多模型协同 ｜ 全平台·桌面 / 主流 IM / 小程序

100+ 领域专家组成你的虚拟团队，运营、设计、数据、开发等全角色场景覆盖

一句话指令自主规划并交付完整结果

多专家并行协作，一个人顶一支团队

MCP 生态 + 自定义 Skills，能力无限扩展

截图重命名与分类

输入

把 截图 目录中的图像根据图像的内容进行重命名及文件夹分类。

输出

我先看看截图文件夹里有哪些图像，然后分析每张图的内容来重命名和分类。
截图文件夹有 11 张 PNG 图像。我需要逐一查看每张图的内容来判断如何命名和分类。我先读取这些图像。

我已经看完了全部 11 张截图，根据内容可以把它们分成三类。分类方案如下：

1. AI-概念图/

  • Claude-Code-上下文工程.png（Claude Code 的上下文工程结构图）
  • RAG-检索增强生成.png（ChatGPT / RAG 流程图）
  • Multi-Agent-ChatDev工作流.png（ChatDev 多智能体开发流程）
  1. Claude-Agent-SDK/ Claude-Agent-SDK-封面.
workbuddyagentoffice-automationexcel-processingdata-analysisvisualization

链接

GraphvizOnline - 浏览器端的 DOT 语言即时图可视化工具

GraphvizOnline 是一个纯客户端的在线 Graphviz 编辑器与查看器，让你在浏览器中直接编写 DOT 代码并即时渲染图表，无需安装任何软件或服务器端处理。

其核心定位可以概括为以下几个方面：

1. 产品核心能力

  • 实时编辑与渲染：左侧编写 DOT 代码，右侧即时预览渲染结果，即写即所得。
  • 多格式导出：支持导出为 SVG（矢量）、PNG（位图）和纯文本 DOT。
  • 语法错误提示：DOT 代码有误时显示编译错误信息，而非白屏崩溃。
  • URL 分享：DOT 源码可编码进 URL 直接分享给他人。
  • Gist 加载：通过 ?url= 参数从 GitHub Gist 或其他公开 URL 加载图定义。
  • 演示模式：?presentation= 参数支持 editable、hide-options、show-engine、show-format、show-raw、show-download、show-share 等多种展示模式，可无缝嵌入技术文档或 PPT 链接。
  • 暗色主题：内置深色模式。
  • SVG 平移缩放：渲染结果支持鼠标拖拽与滚轮缩放，也集成 Hammer.js 支持移动端触控操作。
  • 零数据外传：所有渲染都在浏览器本地完成，源代码不会发送到任何外部服务器。

2. 技术栈与开源信息

  • 图渲染引擎基于 Viz.js，将 Graphviz C 代码通过 Emscripten 编译为 JavaScript，在浏览器内完成 DOT 解析与布局。
  • SVG 渲染与过渡动画由 d3-graphviz 提供（基于 D3.js），交互体验更加平滑。
  • 代码编辑器使用 Ace-editor，提供 DOT 语法高亮、行号、代码折叠等 IDE 级编辑体验。
  • 整体为纯前端项目：JavaScript 88.3% / CSS 8.6% / HTML 3.1%，无任何后端服务。
  • 采用 BSD-3-Clause 许可证，完全免费开源，可自由修改与商用。
  • 在 GitHub 上已获得 986 Stars 和 248 Forks，共 57 次提交。
browser diagram dot-language graphviz open-source tool visualization viz-js

发布

DOT 文件渲染器：在线 Graphviz 图形预览工具

DOT 文件渲染器是什么

DOT 文件渲染器是一款纯前端的在线 Graphviz 图形预览工具。只需在浏览器中粘贴 DOT 语言描述的图结构代码，即可实时渲染为有向图或无向图 SVG，支持通过 URL 片段直接分享图形代码，无需安装任何本地软件。

核心功能

  • 实时渲染：输入 DOT 代码后自动防抖渲染，500ms 内即时出图。
  • URL 分享：图形代码自动编码到 URL 片段中，复制链接即可分享完整图形。
  • 加载示例：内置完整流程图示例，一键体验渲染效果。
  • 错误提示：DOT 语法错误时，在输出区显示详细错误信息。
  • 纯浏览器运行：基于 Viz.js 在浏览器端完成全部渲染，无后端、无上传。

使用方式

  1. 打开 DOT 文件渲染器。
  2. 在输入区粘贴您的 .dot 文件内容。
  3. 图形会自动渲染到下方的输出区。
  4. 复制当前浏览器地址栏中的 URL 即可分享图形。

支持的图类型

  • 有向图（digraph）
  • 无向图（graph）
  • 节点样式、边标签、布局方向（rankdir）等 Graphviz 标准属性

技术栈

  • HTML + CSS + JavaScript
  • Viz.js（WebAssembly 版 Graphviz）
  • 无后端、无依赖、纯静态页面

提示词

我要设计一个WEB应用（HTML），在线渲染DOT文件。有什么好的思路？先分析需求，进行设计，再实现（一个html），存储到 @tools/ 目录。
tool dot graphviz graph diagram visualization viz-js svg

使用 Claude Code：HTML 超乎寻常的妙用

Thariq: Using Claude Code: The Unreasonable Effectiveness of HTML

Markdown 已成为智能体（agent）与我们沟通时占主导地位的文件格式。它简单、可移植，具备一定的富文本能力，且易于编辑。Claude 甚至已经相当擅长在 Markdown 文件中使用 ASCII 绘制图表。

但随着智能体变得越来越强大，我感到 Markdown 已成为一种受限的格式。我发现自己很难阅读超过一百行的 Markdown 文件。我想要更丰富的可视化效果、色彩和图表，并且希望能轻松分享它们。

我也越来越不亲自编辑这些文件，而是将它们用作规格说明、参考文件、头脑风暴输出等。当我确实需要编辑时，我通常会让 Claude 来编辑，这就削弱了 Markdown 最大的一个优势。

我开始更偏爱 HTML 作为输出格式，而不是 Markdown，并且越来越多地看到 Claude Code 团队中的其他人也在使用它。以下就是原因。

（如果你想先看一些示例，可以在这里看到一大堆：https://thariqs.github.io/html-effectiveness ，不过记得回来看更多关于"为什么"的内容。）

为什么选择 HTML？

信息密度

与 Markdown 相比，HTML 能够传达更丰富得多的信息。

htmlmarkdownclaude-code智能体frontendcsssvgjavascriptvisualizationartifacts

2023 年全国行业职业技能竞赛

该文档详细介绍了 2023年全国行业职业技能竞赛，涵盖了多个技术任务。任务一侧重于语音处理，通过Python代码展示了如何利用腾讯云API进行语音识别和语音合成，包括音频文件的Base64编码转换和请求参数配置，并输出了实际的识别结果。任务二则聚焦于语音模型，阐述了声学模型的初始化、加载预训练模型以及语音识别的整个流程，并提到了模型训练的配置。任务三涉及文本处理，通过requests库抓取网页内容，并利用re、BeautifulSoup和lxml.etree等工具进行网页内容解析和文本提取，同时展示了文本清洗、数据扩充以及使用Stanford CoreNLP进行中文分词、词性标注和命名实体识别。任务四是数据分析与可视化，展示了如何从Excel文件中读取急诊科就诊数据，并计算男女比例、每日就诊人数和各诊室就诊人数，最终通过matplotlib库生成饼状图、柱状图和折线图进行数据可视化。

2023年全国行业职业技能竞赛 第二届全国电子企业职业技能竞赛

任务一

任务1.1

任务1.2

speech-to-texttext-to-speechnlpweb-scrapingtencent-cloudvisualizationbeautifulsoupstanford-corenlpmatplotlib

使用 Prometheus Operator 在 Kubernetes 上部署 Prometheus 和 Grafana

监控组件

Prometheus

Prometheus 是一个开源系统监控和警报工具包。

架构图

Grafana

Grafana 用于对收集并存储在 Prometheus 数据库中的指标进行分析和交互式可视化。 您可以以 Prometheus 作为数据源，为 Kubernetes 集群创建自定义图表、图形和警报。

Prometheus Operator

概述

Prometheus Operator 提供 Prometheus 及相关监控组件的 Kubernetes 原生部署和管理。 该项目的目的是简化和自动化 Kubernetes 集群基于 Prometheus 的监控堆栈的配置。

架构图

部署 Prometheus 和 Grafana Monitoring Stack

克隆 kube-prometheus 项目

git clone https://github.com/prometheus-operator/kube-prometheus.git
cd kube-prometheus/

创建 monitoring namespace, CustomResourceDefinitions 和 operator pod

创建 namespace 和 CustomResourceDefinitions

prometheusgrafanakubernetesmonitoringobservabilityvisualizationdashboardalertmanagerprometheus-operator