用Python+Flask打造可視化武俠人物關系圖生成器：從零到一的實戰全記錄

---

一、緣起：一個程序小白的奇妙探索之旅

作為一個接觸Python僅13天的編程萌新，我曾以為開發一個完整的應用是遙不可及的事情。但在DeepSeek的幫助下，我竟用短短半天時間完成了一個本地化武俠人物關系圖生成器的開發！這個工具不僅能批量管理門派和人物，還能自動生成關系圖并導出Excel表格，整個過程充滿了挑戰與驚喜。

本文將完整記錄我的開發過程，手把手帶你用Python+Flask實現這個有趣的項目，最終效果如下：

---

二、制作思路：如何化繁為簡

1. 核心需求

   • 批量添加門派和人物
   • 可視化展示人物關系
   • 支持增刪改查操作
   • 導出結構化數據

2. 技術選型

   • Flask：輕量級Web框架，快速搭建后端服務
   • Graphviz：專業關系圖繪制工具
   • openpyxl：Excel文件生成庫
   • HTML+JavaScript：前端交互實現

3. 架構設計

---

三、準備工作：配置開發環境

1. 基礎工具

   • Python 3.8+
   • VS Code/PyCharm
   • 瀏覽器（推薦Chrome）

2. 安裝依賴庫

   pip install flask graphviz openpyxl
   

3. Graphviz安裝

   • Windows：官網下載安裝包
   • Mac：brew install graphviz
   • Linux：sudo apt-get install graphviz

---

四、實戰開發：七步打造完整系統

步驟1：創建項目結構

📁 Novel-Relationship-Generator
├── 📁 static
│   └── 📁 output        # 存放生成圖片
├── 📁 templates
│   └── index.html      # 前端頁面
└── app.py              # 主程序

步驟2：編寫后端核心（app.py）

from flask import Flask, render_template, request, jsonify, send_file
from graphviz import Digraph
import re
from openpyxl import Workbookapp = Flask(__name__)# 數據存儲
characters = []
sects = ["武當派", "少林派", "峨眉派", "嵩山派"]  # 初始門派
relations = []
sect_descriptions = {"武當派": "以柔克剛的內家拳法","少林派": "天下武功出少林","峨眉派": "女子為主的武林門派","嵩山派": "五岳劍派之首"
}
char_descriptions = {}# 此處省略接口代碼（與前文相同）...if __name__ == "__main__":app.run(debug=True)

步驟3：前端頁面開發（templates/index.html）

<!-- 門派添加模塊 -->
<form id="add-sects-form"><label>批量添加門派（支持逗號/分號/空格分隔）：</label><textarea name="sects" rows="3" placeholder="示例：華山派,日月神教"></textarea><button type="submit">添加門派</button>
</form><!-- 人物關系展示區 -->
<div class="right-panel"><h2>武林門派譜</h2><div id="characters-list"><!-- 動態加載門派及人物 --></div>
</div>

步驟4：添加示例數據

# 示例人物數據
characters.extend([{"name": "張三豐", "sect": "武當派"},{"name": "宋遠橋", "sect": "武當派"},{"name": "空聞大師", "sect": "少林派"},{"name": "滅絕師太", "sect": "峨眉派"},# 可繼續添加其他人物...
])# 示例關系數據
relations.extend([{"from": "張三豐", "to": "宋遠橋", "label": "師徒"},{"from": "空聞大師", "to": "張三豐", "label": "故交"},# 添加更多關系...
])

步驟5：實現關系圖生成

@app.route("/generate_graph", methods=["POST"])
def generate_graph():dot = Digraph(comment="武林關系圖")dot.attr(rankdir="LR", nodesep="0.3")# 添加門派分組for sect in sects:with dot.subgraph(name=f"cluster_{sect}") as sub:sub.attr(label=sect, style="filled", color="lightgrey")for char in characters:if char["sect"] == sect:sub.node(char["name"], shape="box")# 繪制關系線for rel in relations:dot.edge(rel["from"], rel["to"], label=rel["label"])dot.render("static/output/relationship.gv", format="png")return jsonify({"status": "success"})

步驟6：導出Excel功能

@app.route("/export_excel")
def export_excel():wb = Workbook()ws = wb.activews.append(["序號", "門派", "門派簡介", "人物", "人物簡介"])row_num = 1for sect in sects:desc = sect_descriptions.get(sect, "")members = [c for c in characters if c["sect"] == sect]for i, char in enumerate(members):char_desc = char_descriptions.get(char["name"], "")if i == 0:ws.append([row_num, sect, desc, char["name"], char_desc])else:ws.append([row_num, sect, "", char["name"], char_desc])row_num += 1wb.save("武林人物表.xlsx")return send_file("武林人物表.xlsx")

步驟7：運行與測試

python app.py

訪問 http://localhost:5000 即可體驗完整功能

---

五、項目亮點總結

1. 便捷操作

   • 批量導入/導出功能節省時間
   • 實時可視化反饋

2. 技術融合

   • 前后端分離架構
   • 多格式輸出支持（PNG/PDF/Excel）

3. 擴展性強

   • 支持自定義樣式
   • 易于添加新功能模塊

---

六、心得體會：新手的編程啟示

1. 小步快跑：從簡單功能入手，逐步迭代完善
2. 善用工具：Graphviz等成熟庫能大幅提升效率
3. 調試技巧：
   • 使用瀏覽器開發者工具查看網絡請求
   • 添加print語句追蹤數據流向
4. 文檔價值：
   • Flask官方文檔
   • Graphviz語法指南

給讀者的建議：不要被復雜的功能嚇倒，把大問題拆解成小模塊逐個擊破。就像搭建樂高積木一樣，把每個Python功能模塊看作一塊積木，最終就能拼出完整的作品！

---

立即動手嘗試吧！ 基于這個項目還可以拓展思路，比如把做一個日常工作管理的頁面等，所以馬上行動起來把，你的世界正等待被創造~ 🎉
目前剛開始學編程，并試著在CSDN發表文章，如果需要完整代碼，可以在評論區留言并私信我。