2026-03-24

发布时间 :
  1. 03月24日
    1. 一、今日完成情况
    2. 二、今日感悟
    3. 三、备注
    4. 四、前置摄像头
    5. 五、Claudian 中转接口配置
    6. 六、Claudian 画架构图
      1. 1、背景
      2. 2、示例
    7. 七、AI 自动绘图打通链路
    8. 八、Excaildraw自定义icon矢量图
      1. 1、背景
      2. 2、代码脚本实现
    9. 九、codex 部署博客

03月24日

一、今日完成情况

  • claude 接口中转配置，任何AI接口都可以分装为其格式。
  • claudian插件编写excaildraw图尝试，测试效果。
  • excalidraw自由插入矢量图效果实现。
  • codex简单实现博客的部署，这是我平时3-5天的工作量啊，他几分钟给我干好了。

二、今日感悟

  • 核心业务数据​：
    • 完成API转接，这个也是有建设性意义的，未来我claude的产品可以直接使用了，而不局限于固定的模型
    • 完成excaildraw + AI的时候，我还是all in 这个软件的绘图和展示，用熟练了还是非常灵活的。
  • ​今日工作总结：​
    • 无
  • ​明日工作计划：
    • 完成一下网络前沿技术的作业，这个别忘记了，看起来有点复杂，还有wireshark抓包的。
    • 学习常见的excaildraw操作和使用，完成项目架构图的绘制
    • 完成PPT内容的完成–需要分解一下三页PPT分别介绍什么，如何才可以和后面的内容连贯起来。
    • 异步并发的学习，提上日程。
    • 确定写入数据和读数据，所对应的数据库是哪几个，我接下来要从哪几个数据库当中抽数据
  • ​今日学习成长：​
    • 反正就是一个系统性的原则，未来如果有什么事情需要重复做，那么我就要自定义一个专业流程，降低我的成本。像PPT演示，项目流程制作，这是我接下来每星期都要做一点的，因此我至少搞个40+次是需要的，要养成系统性做这件事的好习惯

三、备注

  • 无

四、前置摄像头

sudo apt update
sudo apt upgrade
sudo apt install cheese
cheese

五、Claudian 中转接口配置

这里记录下来New API这里配置API映射，把deepseek，xAI 等标准接口是openai格式的，映射为Claude 的接口，然后再使用claudian插件，配置个人的token，实现任意AI使用Claude的工具非常好用，下面是各个公司的接口和配置文件的记录：

ANTHROPIC_API_KEY=396450498c664d64a9e6bee1f117e06b.T34KvITUxFtEty1i
ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic
ANTHROPIC_MODEL=GLM-4.7

ANTHROPIC_API_KEY=sk-uy6EJkbLhBsqZ11SdbDDTJ1MKcZeC17NT1mcLyRZa8bLQBoK
ANTHROPIC_BASE_URL=http://162.14.77.140:3000
ANTHROPIC_MODEL=grok-3

deepseek 中转Claude接口：

ANTHROPIC_API_KEY=sk-Jak5hI8iPx2xVyHjUJfJctpnyVXN5JqTtLMSbqfKofoiIwoo
ANTHROPIC_BASE_URL=http://162.14.77.140:3000/api/anthropic
ANTHROPIC_MODEL=claude-3-5-sonnet-20240620

新接口哦，Deepseek版本：

ANTHROPIC_API_KEY=sk-Jak5hI8iPx2xVyHjUJfJctpnyVXN5JqTtLMSbqfKofoiIwoo
ANTHROPIC_BASE_URL=http://162.14.77.140:3000
ANTHROPIC_MODEL=claude-3-5-sonnet-20240620
Pasted image 20260324152611

xAI grok 中转Claude接口：

ANTHROPIC_API_KEY=sk-Jak5hI8iPx2xVyHjUJfJctpnyVXN5JqTtLMSbqfKofoiIwoo
ANTHROPIC_BASE_URL=http://162.14.77.140:3000/api/anthropic
ANTHROPIC_MODEL=claude-3-5-sonnet-20240620

sk-63a04833a4504e8d9b65075a8d438baf

备份原来的配置：

vi ~/.claude/settings.json

{
  "env": {
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.5-air",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.5-air",
    "ANTHROPIC_AUTH_TOKEN": "396450498c664d64a9e6bee1f117e06b.T34KvITUxFtEty1i",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  },
  "permissions": {
    "defaultMode": "plan"
  },
  "alwaysThinkingEnabled": false
}

六、Claudian 画架构图

1、背景

现在PPT上的技术架构图绘制有几种情况，主流的就是两种，方法如下：

  • 文生图：直接把需求告诉AI，其会生成满足架构的图片
    • 优点：图片非常精美，充满科技感
    • 缺点：灵活性极差，无法自定义逻辑关系和节点连接
  • 逻辑图绘制软件：常见的有drawio、visio
    • 优点：全称手绘，自定义程度非常高
    • 缺点：工作量极大，而且软件页面过于专业，不好看，相关的图例要素比较少，可用素材少。
  • PPT绘制：满足一般需求，一般是非专业的常用方法

那么如何才能既能够保持灵活性，又可以让AI帮上忙，快速的吧架构搭建出来，然后人工审核，做出一些修改呢？

方法就是，让AI使用excaildraw，也就是网页代码的生成绘制方法，先把大框架搭建出来，然后我们可以手工的修改，兼顾了两种方式的优点。

2、示例

我昨晚到今天下午，尝试配置了很久，才配置好了，自定义API，自定义claudian接入接口，接口映射，还有自动化MCP工具的嵌入，现在进行尝试。

我只需要输入代码的架构，其帮我搭建好工作架构。

Pasted image 20260324162227

我也可以提出修改建议，批量修改字体，也可以手动修改。

Pasted image 20260324162255

直接帮我修改画布的代码文件，按照我的要求修改字体，画出架构图，如果我不满意，可以直接在画布上修改优势非常明显。我太开心了，终于把这个流程打通了，下面我将使用实验室的代码进行实践，画出代码逻辑图。

七、AI 自动绘图打通链路

curl http://162.14.77.140:3000/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk-uy6EJkbLhBsqZ11SdbDDTJ1MKcZeC17NT1mcLyRZa8bLQBoK" \
  -d '{
    "model": "gemini-2.5-flash",
    "messages": [{"role": "user", "content": "hi"}]
  }'

^981525

可见我的API是正在工作的，下面我需要快速上手excaildraw的AI自动画图，还有mermaid转化的功能，我发现AI自动画图是需要接口的。

Error: OpenAI API Token is not set. Please set it in plugin settings.

因此我加入了openai的API key，我昨天API整合统一的部署真是有先见之明，环环相扣，今天就必须要用到了。

加入之后，我使用常规的网址：

http://162.14.77.140:3000/vi

进行测试发现联通失败，报错，报错信息如下：

Error: Invalid URL (POST /v1)

大致判断是网址问题，接口我使用以上的[[#^981525]] 指令测试，网络是没有问题的，因此我修改API 网址：

http://162.14.77.140:3000/v1/chat/completions

更改模型为Gemini-2.5-flash，发现还是报错，可是这次只是服务器的问题，和我的网络没有问题了。

Error: This model is currently experiencing high demand. Spikes in demand are usually temporary. Please try again later.

我更改模型为gemini-2.5-pro，成功打通了所有环境，我只需要提出架构图的需求，AI就可以帮我绘制流程图了，效果如下：

Pasted image 20260324183029

可以的，基本满足我当前AI生成流程图的要求了，下面我需要实现的重点，是icon如何自定义插入，因为我们在实现PPT展示的时候，需要插入图标的，不然会非常单调。

八、Excaildraw自定义icon矢量图

1、背景

我们假如说只是使用标准的PNG或者SVG格式的话，是不是一定需要一个icon来存储，可是我们如果移动项目的话，就必须要把这些存放图片的icon文件夹一起移动了，就非常麻烦。而且如果没有转移的话，系统就找不到图片了，会出问题。

因此，我们把图片进行数据化，内嵌到绘图软件当中，然后绘图软件可以根据数据还原图片，这样就方便移动了，具体实现方法是这样的，转化为Base64格式，然后复制到excaildraw当中单独存放：

Base64 的魔力：它是把图片的二进制数据（机器看的 0 和 1）编码成了一串纯文本字符。

  • 这串字符就像是图片的“基因序列”。
  • 重点来了：当你把图片转成 Base64 嵌入到 JSON 里时，图片就不再是一个外部文件了，它变成了 JSON 文本的一部分。
  • 结果：你的 .excalidraw 文件现在是“全内嵌”的。无论你把它拷到哪，只要有这串字符串，Excalidraw 就能根据“基因序列”原地还原出那张图片。

2、代码脚本实现

之前使用豆包的代码报错了，保存效果是这样的：

Pasted image 20260324221539

发现代码问题如下：

  1. 字段名错误：在 files 对象中，存储 Base64 数据的键名必须是 dataURL，而你写的是 data。
  2. 缺少必要字段：每个 files 内部对象通常还需要一个冗余的 id 字段，且 lastRetrieved 时间戳（可选但建议有）。
  3. SVG 的 MIME 类型：虽然 image/svg+xml 是标准，但有些版本对 Base64 后的 SVG 识别比较挑剔。

修改之后的代码是这样的。

import base64
import json
from pathlib import Path
import time

# ===================== 你的配置（按你实际路径改） =====================
ICON_FOLDER = "assets/icons"  # 图标文件夹相对路径
OUTPUT_PATH = "icon-lib.excalidraw"
ICON_SIZE = 60
SPACING = 100
START_X = 50
START_Y = 50
# ==================================================================

def clean_filename(name: str) -> str:
    """把文件名里的特殊字符（空格/括号）换成下划线，避免Excalidraw识别失败"""
    return name.replace(" ", "_").replace("(", "_").replace(")", "_").replace("[", "_").replace("]", "_")

def build_excalidraw_icon_lib():
    elements = []
    files = {}
    x, y = START_X, START_Y

    for img_path in Path(ICON_FOLDER).iterdir():
        if img_path.suffix.lower() not in [".svg", ".png", ".jpg"]:
            continue
        
        # 1. 读取图片转Base64
        with open(img_path, "rb") as f:
            img_bytes = f.read()
        b64_data = base64.b64encode(img_bytes).decode("utf-8")
        
        # 2. 生成干净的fileId（去掉所有特殊字符）
        clean_stem = clean_filename(img_path.stem)
        file_id = f"icon_{clean_stem}"
        
        # 3. 自动判断图片类型，生成正确的data URL
        if img_path.suffix.lower() == ".svg":
            mime_type = "image/svg+xml"
            data_prefix = "data:image/svg+xml;base64,"
        else:
            mime_type = "image/png"
            data_prefix = "data:image/png;base64,"
        data_url = f"{data_prefix}{b64_data}"
        
        # 4. 存入 files 资源池（注意：键名必须是 dataURL）
        files[file_id] = {
            "id": file_id,           # 内部也要存一份 id
            "mimeType": mime_type,
            "dataURL": data_url,     # 关键点：这里必须叫 dataURL
            "created": int(time.time() * 1000)
        }
        
        # 5. 创建画布元素
        elements.append({
            "type": "image",
            "x": x,
            "y": y,
            "width": ICON_SIZE,
            "height": ICON_SIZE,
            "fileId": file_id,
            "status": "saved",
            "version": 1,            # 建议加上版本号
            "versionNonce": int(time.time()), # 增加随机性防止缓存错误
            "strokeColor": "transparent", # 图标通常不需要外框线
            "backgroundColor": "transparent",
            "fillStyle": "hachure",
            "strokeWidth": 1,
            "strokeStyle": "solid",
            "roughness": 1,
            "opacity": 100,
        })
        
        # 自动排版
        x += SPACING
        if x > 800:
            x = START_X
            y += SPACING

    # 生成完整Excalidraw JSON（严格符合官方格式）
    excalidraw_json = {
        "type": "excalidraw",
        "version": 2,
        "source": "https://excalidraw.com",
        "elements": elements,
        "files": files,
        "appState": {
            "gridSize": None,
            "viewBackgroundColor": "#ffffff"
        }
    }

    # 写入文件
    with open(OUTPUT_PATH, "w", encoding="utf-8") as f:
        json.dump(excalidraw_json, f, indent=2, ensure_ascii=False)
    
    print(f"✅ 干净版图标库生成成功！")
    print(f"📁 输出文件：{OUTPUT_PATH}")
    print(f"🖼️ 图标数：{len(elements)} | 资源数：{len(files)}")
    print(f"🔍 已自动清理fileId中的特殊字符，避免Excalidraw识别失败")

if __name__ == "__main__":
    build_excalidraw_icon_lib()

注意，需要注意代码和icon图片的相对位置，运行python代码之后，图标会自动保存在icon-lib当中。

(base) kipley@Mac scripts % tree
.
├── assets
│   └── icons
│       ├── cloud-server (1).png
│       ├── cloud-server.png
│       ├── cloud-sync.png
│       ├── docker.png
│       ├── server (1).png
│       ├── server.png
│       ├── ts-图标_DBserver (1).png
│       └── ts-图标_DBserver.png
├── build-icons.py
├── CopyFilePath.js
├── create-folder.js
└── icon-lib.excalidraw
Pasted image 20260324221805

至此，自定义加入矢量图完成了，我未来使用只需要批量寻找图片，存放到文件夹当中，然后使用脚本运行批量转化即可。

九、codex 部署博客

已完成，本地可访问。

  • 我已在当前仓库下创建并部署站点：demo-site
  • 已把主题配置为 hexo-theme-matery，并成功生成静态文件
  • 本地服务已启动并验证成功（HTTP 200）

访问地址：

关键文件：

  • 站点配置：demo-site/_config.yml
  • 主题目录：demo-site/themes/hexo-theme-matery

后续你可以直接用这两个命令：

  • 启动：
cd /Users/kipley/Documents/code/projects/hexo-theme-matery/demo-site && npx hexo s -p 4001 --host 127.0.0.1
  • 停止后台服务：
pkill -f "hexo s -p 4001"

略施小计，让AI帮我部署项目。

把我此路径的文章，部署到我的博客上，让codex帮我完成：
/Users/kipley/Documents/remotely-save/Obsidian Vault/我的工作量/2026年度/3月份/2026-03-01.md

/Users/kipley/Documents/code/projects/hexo-theme-matery/demo-site

这个codex花了15min，干了我刚刚开始配置网页博客5天所需要干的活，哭笑不得。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 kipleyarch@gmail.com

浙ICP备2025181060号-2 © litearch

Built with Hexo and 3-hexo theme

Obsidian