# Technical Documentation Generator > Automated HTML architecture documentation generator that produces navigable, searchable technical documentation from codebase analysis. - Skill: `majiayu000/technical-documentation-generator` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add majiayu000/technical-documentation-generator` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/technical-documentation-generator/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/technical-documentation-generator --- # Technical Documentation Generator ## Purpose An automated HTML architecture documentation generator that produces navigable, searchable technical documentation from codebase analysis. Creates comprehensive documentation including API references, architecture diagrams, and component relationships. **Problem Space:** - Documentation often out of sync with code - Manual documentation is time-consuming - Architecture knowledge siloed in developers' heads - No standardized format for technical docs **Solution Approach:** - Auto-extract documentation from code - Generate architecture diagrams from structure - Create searchable, navigable HTML output - Support for multiple documentation styles ## When to Use - New team member onboarding - Project handoff documentation - API reference generation - Architecture decision records - System overview documentation - Open source project documentation ## When NOT to Use - User-facing product documentation - Marketing materials - Tutorial/guide creation (use tutorial frameworks) - Documentation requiring heavy customization --- ## Core Instructions ### Documentation Structure ``` docs/ ├── index.html # Home page with overview ├── architecture/ │ ├── index.html # Architecture overview │ ├── components.html # Component breakdown │ └── diagrams/ # Generated diagrams ├── api/ │ ├── index.html # API overview │ ├── endpoints.html # REST endpoints │ └── models.html # Data models ├── guides/ │ ├── getting-started.html │ └── deployment.html ├── reference/ │ ├── configuration.html │ └── environment.html ├── assets/ │ ├── css/ │ ├── js/ │ └── images/ └── search.json # Search index ``` ### Standard Procedures #### 1. Code Analysis Extract documentation from: - Docstrings (Python, JS) - JSDoc/TSDoc comments - OpenAPI/Swagger specs - README files - Inline comments with specific markers #### 2. Architecture Extraction Identify and document: - Module/package structure - Class hierarchies - Function relationships - API endpoints - Database schemas #### 3. Template Rendering Use Jinja2 templates with: - Consistent navigation - Search functionality - Syntax highlighting - Responsive design - Dark mode support ### Documentation Types | Type | Source | Output | |------|--------|--------| | API Reference | Docstrings, OpenAPI | Endpoint documentation | | Architecture | Directory structure | Component diagrams | | Configuration | Config files, .env.example | Config reference | | Models | Type definitions, schemas | Data model docs | | Guides | Markdown files | HTML guides | ### HTML Template Structure ```html {{ title }} - {{ project_name }}
{{ content | safe }}
``` --- ## Templates ### API Endpoint Template ```html
{{ method }} {{ path }}

{{ description }}

{% if parameters %}

Parameters

{% for param in parameters %} {% endfor %}
Name Type Required Description
{{ param.name }} {{ param.type }} {{ "Yes" if param.required else "No" }} {{ param.description }}
{% endif %} {% if request_body %}

Request Body

{{ request_body | tojson(indent=2) }}
{% endif %}

Response

{% for status, response in responses.items() %}
{{ status }} 
{{ response | tojson(indent=2) }}
{% endfor %}
``` ### Component Documentation Template ```html

{{ component.name }}

{{ component.type }}

Overview

{{ component.description }}

{% if component.dependencies %}

Dependencies

{% endif %} {% if component.methods %}

Methods

{% for method in component.methods %}

{{ method.signature }}

{{ method.description }}

{% if method.params %}
Parameters
{% for param in method.params %}
{{ param.name }}: {{ param.type }}
{{ param.description }}
{% endfor %}
{% endif %} {% if method.returns %}
Returns

{{ method.returns.type }} - {{ method.returns.description }}

{% endif %} {% if method.example %}
Example
{{ method.example }}
{% endif %}
{% endfor %}
{% endif %}
``` ### CSS Theme ```css /* main.css */ :root { --color-primary: #3AA7F9; --color-primary-dark: #2A7BC4; --color-bg: #FFFFFF; --color-bg-secondary: #F8FAFC; --color-text: #0F172A; --color-text-secondary: #334155; --color-border: #E2E8F0; --color-code-bg: #1E293B; --sidebar-width: 280px; --content-max-width: 800px; } [data-theme="dark"] { --color-bg: #0F172A; --color-bg-secondary: #1E293B; --color-text: #F8FAFC; --color-text-secondary: #94A3B8; --color-border: #334155; --color-code-bg: #0F172A; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--color-bg-secondary); border-right: 1px solid var(--color-border); padding: 1.5rem; overflow-y: auto; } .content { margin-left: var(--sidebar-width); padding: 2rem; max-width: calc(var(--content-max-width) + 4rem); } /* Method badges */ .method.get { background: #22C55E; } .method.post { background: #3B82F6; } .method.put { background: #F59E0B; } .method.delete { background: #EF4444; } /* Code blocks */ pre { background: var(--color-code-bg); border-radius: 8px; padding: 1rem; overflow-x: auto; } code { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; } ``` --- ## Examples ### Example 1: Python Package Documentation **Input**: "Generate documentation for my Python API" **Process**: 1. Parse all `.py` files for docstrings 2. Extract function signatures and types 3. Build module hierarchy 4. Generate HTML pages for each module 5. Create search index **Output**: Complete HTML documentation site with: - Module index - Class/function reference - Type annotations - Usage examples from docstrings ### Example 2: REST API Documentation **Input**: "Document my Flask REST API with OpenAPI spec" **Output**: Interactive API documentation with: - Endpoint listing by resource - Request/response examples - Authentication details - Error code reference --- ## Validation Checklist Before finalizing documentation: - [ ] All public APIs documented - [ ] Examples compile/run - [ ] Links not broken - [ ] Search index generated - [ ] Navigation complete - [ ] Responsive on mobile - [ ] Syntax highlighting works - [ ] Dark mode functions - [ ] Version number updated --- ## Related Resources - Skill: `branded-document-suite` - PDF/DOCX exports - Skill: `repository-auditor` - Code quality metrics - Sphinx Documentation: https://www.sphinx-doc.org/ - MkDocs: https://www.mkdocs.org/ --- ## Changelog ### 1.0.0 (January 2026) - Initial release - HTML template system - Code extraction for Python - Search functionality - Dark mode support