Show HN: I built an app to generate story relationships using Mermaidjs

Source | HN Comments

该应用名为 Austen，是一个基于 AI 的 Angular 应用，利用 Mermaidjs 生成书籍角色关系图。用户可以搜索 Open Library 上的书籍，通过 AI 分析生成角色关系图，并支持保存、下载、分享图表。技术栈包括 Angular、Analog、TypeScript、Supabase、Cloudflare Pages 等。应用提供示例图表，并列出了安装、设置步骤和未来待办事项，如点赞功能和加载更多图表。

Show HN：我构建了一个使用 Mermaidjs 生成故事人物关系的应用

Austen

Austen 是一个由 AI 驱动的 Angular 应用，使用 Analogjs 初始化，旨在使用 Mermaidjs 图表生成书籍角色之间的关系。

功能特点

📚 搜索和分析来自 Open Library 的任何书籍
🤖 AI 驱动的角色关系分析
📊 生成 Mermaid 图表
💾 保存、下载（SVG、PNG）和管理你生成的图表
🌐 公开分享图表或保持私密
🔍 发现其他用户生成的公共图表

示例图表

以下是由 "L. Frank Baum" 创作的 "The Wizard of Oz" 生成的角色关系图：

%%{
 init: {
  'theme': 'base',
  'themeVariables': {
   'primaryColor': '#BB2528',
   'primaryTextColor': '#fff',
   'primaryBorderColor': '#7C0000',
   'lineColor': '#F8B229',
   'secondaryColor': '#006100',
   'tertiaryColor': '#fff'
  }
 }
}%%
 graph TD
  A[Dorothy Gale] -->|Pet| B[Toto]
  A -->|Family| C[Uncle Henry and Aunt Em]
  A -->|Friends| D[Scarecrow]
  A -->|Friends| E[Tin Woodman]
  A -->|Friends| F[Cowardly Lion]
  A -->|Enemy| G[The Wicked Witch of The West]
  A -->|Enemy| H[The Wizard of OZ]
  A -->|Helps Dorothy| I[Glinda]
  D -->|Friends| E
  E -->|Friends| F
  B -->|In Kansas| C

加载中...

技术栈：

UI

API

安装 & 设置

克隆代码仓库：

git clone https://github.com/herol3oy/austen.git
cd austen

安装依赖：

npm install

设置环境变量：
- 复制 .env.example 文件到 .env
- 填写需要的 API 密钥：

DEEPSEEK_API_KEY=your_deepseek_api_key
VITE_PUBLIC_SUPABASE_URL=your_supabase_url
VITE_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

设置 Supabase：
- 创建一个新的 Supabase 项目
- 启用身份验证
- 在公共 schema 中创建 graphs 表：
  - id uuid primary key
  - book_name text not null
  - author_name text not null
  - svg_graph text not null
  - mermaid_syntax text not null
  - emojis text
  - user_id uuid
  - is_public boolean default false
  - created_at timestamp
启动开发服务器：

npm run dev

构建用于生产环境：

npm run build

TODO

实现图表的点赞/取消点赞功能
- 添加点赞按钮
- 在 Supabase 中实现点赞/取消点赞的 API 端点
- 添加点赞计数显示
在发现页面加载更多图表
- 添加一个按钮来加载更多图表

截图

在主页上为给定的书生成图表

在我的图表页面中找到您生成的图表

在发现页面中查找公共图表

Jane Austen logo 参考

"Jane Austen Inspired Illustrations", CC-BY 4.0. Quelle: https://colorconfetti.com/culture-history-environment/jane-austen/jane-austen-inspired-illustrations/

许可证

MIT LICENSE

关于

📚 发现故事人物关系

austen.pages.dev