Back to Details

technical-doc-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Technical Documentation Creator

技术文档生成器

Create comprehensive HTML technical documentation with code examples and API workflows.
可生成包含代码示例和API工作流的完整HTML技术文档。

When to Use

适用场景

  • "Create API documentation for [endpoints]"
  • "Generate technical docs for [system]"
  • "Document API reference"
  • "Create developer documentation"
  • "为[端点]创建API文档"
  • "为[系统]生成技术文档"
  • "编写API参考文档"
  • "创建开发者文档"

Components

包含组件

  1. Overview: purpose, key features, tech stack
  2. Getting Started: installation, setup, quick start
  3. API Reference: endpoints with request/response examples
  4. Code Examples: syntax-highlighted code blocks
  5. Architecture: system diagram (SVG)
  6. Workflows: step-by-step processes
  1. 概述：用途、核心特性、技术栈
  2. 快速入门：安装、配置、快速上手
  3. API参考：附带请求/响应示例的端点说明
  4. 代码示例：带语法高亮的代码块
  5. 架构说明：系统架构图（SVG）
  6. 工作流：分步操作流程

HTML Structure

HTML结构

html
<!DOCTYPE html>
<html>
<head>
  <title>[API/System] Documentation</title>
  <style>
    body { font-family: system-ui; max-width: 1000px; margin: 0 auto; }
    pre { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; overflow-x: auto; }
    .endpoint { background: #f7fafc; padding: 15px; margin: 10px 0; border-left: 4px solid #4299e1; }
    code { background: #e2e8f0; padding: 2px 6px; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>[System] Documentation</h1>
  <!-- Overview, Getting Started, API Reference, Examples -->
</body>
</html>
html
<!DOCTYPE html>
<html>
<head>
  <title>[API/System] Documentation</title>
  <style>
    body { font-family: system-ui; max-width: 1000px; margin: 0 auto; }
    pre { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; overflow-x: auto; }
    .endpoint { background: #f7fafc; padding: 15px; margin: 10px 0; border-left: 4px solid #4299e1; }
    code { background: #e2e8f0; padding: 2px 6px; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>[System] Documentation</h1>
  <!-- Overview, Getting Started, API Reference, Examples -->
</body>
</html>

API Endpoint Pattern

API端点模板

html
<div class="endpoint">
  <h3><span style="color: #48bb78;">GET</span> /api/users/{id}</h3>
  <p>Retrieve user by ID</p>

  <h4>Request</h4>
  <pre><code>curl -X GET https://api.example.com/users/123</code></pre>

  <h4>Response</h4>
  <pre><code>{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com"
}</code></pre>
</div>
html
<div class="endpoint">
  <h3><span style="color: #48bb78;">GET</span> /api/users/{id}</h3>
  <p>根据ID获取用户信息</p>

  <h4>请求</h4>
  <pre><code>curl -X GET https://api.example.com/users/123</code></pre>

  <h4>响应</h4>
  <pre><code>{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com"
}</code></pre>
</div>

Code Block Pattern

代码块模板

html
<pre><code>// Installation
npm install package-name

// Usage
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>
html
<pre><code>// 安装
npm install package-name

// 使用
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>

Workflow

工作流程

  1. Extract API endpoints, methods, parameters
  2. Create overview and getting started sections
  3. Document each endpoint with examples
  4. Add code snippets for common operations
  5. Include architecture diagram if relevant
  6. Write to 
    [system]-docs.html
Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).
  1. 提取API端点、请求方法、参数
  2. 创建概述和快速入门章节
  3. 为每个端点编写文档并附示例
  4. 添加常用操作的代码片段
  5. 若相关则补充架构图
  6. 写入 
    [system]-docs.html
    文件
HTTP方法使用语义化颜色：GET（绿色）、POST（蓝色）、DELETE（红色）。