Spaces:

duqing26
/

mind-map-master

Sleeping

App Files Files Community

duqing2026 commited on 26 days ago

Commit

c8092b3

1 Parent(s): 233fcae

Initial commit of Mind Map Master

Browse files

Files changed (6) hide show

.gitignore +5 -0
Dockerfile +18 -0
README.md +31 -4
app.py +11 -0
requirements.txt +2 -0
templates/index.html +232 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,5 @@

+__pycache__/
+*.pyc
+.DS_Store
+venv/
+.env

Dockerfile ADDED Viewed

	@@ -0,0 +1,18 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Create a user to avoid running as root
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md CHANGED Viewed

@@ -1,12 +1,39 @@
 ---
 title: Mind Map Master
-emoji: 🐠
-colorFrom: purple
 colorTo: indigo
 sdk: docker
-pinned: false
 license: mit
 short_description: 思维导图大师
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Mind Map Master
+emoji: 🧠
+colorFrom: blue
 colorTo: indigo
 sdk: docker
+app_port: 7860
 license: mit
 short_description: 思维导图大师
+pinned: false
 ---
+# 思维导图大师 (Mind Map Master)
+一个简单而强大的在线思维导图生成工具。
+A simple yet powerful online mind map generator.
+## 功能特点
+- **Markdown 驱动**: 使用简单的 Markdown 语法即可生成精美的思维导图。
+- **实时预览**: 左侧编辑，右侧即时渲染。
+- **导出支持**: 支持导出为 SVG 矢量图和 PNG 图片。
+- **完全免费**: 无需注册，即开即用。
+- **本地优先**: 数据完全在浏览器端处理，保护隐私。
+## 使用方法
+1. 在左侧编辑器中输入 Markdown 文本。
+2. 使用 `#` 表示一级节点，`##` 表示二级节点，`-` 表示列表项。
+3. 点击右上角的导出按钮保存你的作品。
+## 部署
+本项目基于 Flask + Tailwind CSS + Markmap 构建，支持 Docker 部署。
+```bash
+docker build -t mind-map-master .
+docker run -p 7860:7860 mind-map-master
+```

app.py ADDED Viewed

	@@ -0,0 +1,11 @@

+from flask import Flask, render_template, request, jsonify
+import os
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=7860)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,232 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>思维导图大师 (Mind Map Master)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+    <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.16.0/dist/browser/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.16.0/dist/browser/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+    <style>
+        body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+        .editor-container { height: calc(100vh - 64px); }
+        #mindmap { width: 100%; height: 100%; }
+        /* Custom scrollbar */
+        textarea::-webkit-scrollbar {
+            width: 8px;
+        }
+        textarea::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        textarea::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+        textarea::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 h-screen flex flex-col overflow-hidden">
+    <!-- Header -->
+    <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 shadow-sm z-10">
+        <div class="flex items-center gap-3">
+            <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">M</div>
+            <h1 class="text-xl font-bold text-gray-800">思维导图大师</h1>
+            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full font-medium">Pro</span>
+        </div>
+        <div class="flex items-center gap-4">
+            <button onclick="loadExample()" class="text-gray-600 hover:text-blue-600 font-medium text-sm flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                加载示例
+            </button>
+            <div class="h-6 w-px bg-gray-300"></div>
+            <button onclick="downloadSVG()" class="text-gray-600 hover:text-blue-600 font-medium text-sm flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+                导出 SVG
+            </button>
+            <button onclick="downloadPNG()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition shadow-sm flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                导出图片
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-1 flex editor-container">
+        <!-- Editor -->
+        <div class="w-1/3 border-r border-gray-200 bg-white flex flex-col">
+            <div class="p-3 bg-gray-50 border-b border-gray-200 text-xs font-semibold text-gray-500 uppercase tracking-wider flex justify-between items-center">
+                <span>Markdown 编辑器</span>
+                <span class="text-gray-400">支持快捷键</span>
+            </div>
+            <textarea id="editor" class="flex-1 w-full p-4 resize-none focus:outline-none font-mono text-sm leading-relaxed text-gray-700" placeholder="# 输入你的思维导图内容..." spellcheck="false"></textarea>
+        </div>
+        <!-- Preview -->
+        <div class="flex-1 bg-gray-50 relative overflow-hidden">
+            <svg id="mindmap" class="w-full h-full"></svg>
+            <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-2 rounded-lg shadow border border-gray-200 flex gap-2">
+                <button onclick="zoomIn()" class="p-1.5 hover:bg-gray-100 rounded text-gray-600" title="放大">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
+                </button>
+                <button onclick="zoomOut()" class="p-1.5 hover:bg-gray-100 rounded text-gray-600" title="缩小">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" /></svg>
+                </button>
+                <button onclick="fitView()" class="p-1.5 hover:bg-gray-100 rounded text-gray-600" title="适应屏幕">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>
+                </button>
+            </div>
+        </div>
+    </main>
+    <script>
+        // Initial Markdown
+        const initialMarkdown = `# 思维导图大师
+## 核心功能
+- ⚡️ 实时渲染
+- 🎨 自动布局
+- 📥 导出 SVG/PNG
+- 📱 响应式设计
+## 使用指南
+- 使用 Markdown 语法
+- # 一级标题
+- ## 二级标题
+- - 列表项作为节点
+## 技术栈
+- Flask
+- Tailwind CSS
+- Markmap
+- D3.js`;
+        let mm;
+        const transformer = new markmap.Transformer();
+        const editor = document.getElementById('editor');
+        const svgEl = document.getElementById('mindmap');
+        // Initialize
+        function init() {
+            const { Markmap } = markmap;
+            mm = Markmap.create(svgEl, null, null);
+            editor.value = initialMarkdown;
+            update();
+        }
+        // Update Mindmap
+        function update() {
+            const markdown = editor.value;
+            const { root } = transformer.transform(markdown);
+            mm.setData(root);
+            mm.fit();
+        }
+        // Event Listeners
+        editor.addEventListener('input', () => {
+            const markdown = editor.value;
+            const { root } = transformer.transform(markdown);
+            mm.setData(root);
+            // Don't refit on every keystroke to keep user context
+        });
+        // Load Example
+        function loadExample() {
+            const examples = [
+                `# 商业计划书
+## 市场分析
+- 目标用户
+- 竞品分析
+- 市场规模
+## 产品介绍
+- 核心功能
+- 差异化优势
+## 运营策略
+- 获客渠道
+- 用户留存
+## 财务预测
+- 成本结构
+- 收入来源`,
+                `# 学习路线图
+## 前端基础
+- HTML5
+- CSS3
+- JavaScript (ES6+)
+## 框架工具
+- React / Vue
+- Tailwind / Bootstrap
+- Webpack / Vite
+## 后端知识
+- Node.js
+- Database (SQL/NoSQL)
+- API Design`,
+            ];
+            const randomExample = examples[Math.floor(Math.random() * examples.length)];
+            editor.value = randomExample;
+            update();
+            mm.fit();
+        }
+        // Zoom Controls
+        function zoomIn() {
+            mm.rescale(1.25);
+        }
+        function zoomOut() {
+            mm.rescale(0.8);
+        }
+        function fitView() {
+            mm.fit();
+        }
+        // Export SVG
+        function downloadSVG() {
+            const svgData = new XMLSerializer().serializeToString(svgEl);
+            const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "mindmap.svg";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        // Export PNG
+        async function downloadPNG() {
+            // Need to convert SVG to Canvas/Image
+            // Simple approach: Serialize SVG, draw to canvas
+            const svgData = new XMLSerializer().serializeToString(svgEl);
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            const img = new Image();
+            // Get dimensions
+            const bbox = svgEl.getBoundingClientRect();
+            canvas.width = bbox.width * 2; // High DPI
+            canvas.height = bbox.height * 2;
+            ctx.scale(2, 2);
+            // Background
+            ctx.fillStyle = "#ffffff"; // Default background
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+            const url = URL.createObjectURL(svgBlob);
+            img.onload = function() {
+                ctx.drawImage(img, 0, 0, bbox.width, bbox.height);
+                URL.revokeObjectURL(url);
+                const link = document.createElement("a");
+                link.download = "mindmap.png";
+                link.href = canvas.toDataURL("image/png");
+                link.click();
+            };
+            img.src = url;
+        }
+        // Run init
+        init();
+    </script>
+</body>
+</html>