Capstone: Document a Complete Project

🔄 Seven lessons of syntax, techniques, AI generation, and tools. Now let’s put it all together. In this capstone, you’ll create a documentation set for a complete project — the same kind of deliverable you’d produce at work.

The Capstone Project

You’ll document a task management application (think simplified Trello). This project has:

• A React frontend
• An Express API
• A PostgreSQL database
• OAuth authentication via Google
• Three user roles: Admin, Member, Guest

Your deliverable: four diagrams that document the system from different angles.

Diagram 1: Architecture Overview (Flowchart)

Start with the big picture. Use a flowchart to show every component and how they connect.

What to include:

• All system components (frontend, API, database, external services)
• Connections between components (labeled with protocol or data type)
• Subgraphs for logical boundaries (frontend, backend, external)

Exercise: Open the Mermaid Live Editor and create an architecture diagram. Your diagram should show the React app connecting to the Express API, the API connecting to PostgreSQL and Google OAuth, and subgraphs separating frontend, backend, and external services. Label the connections (REST, SQL, OAuth).

Review checklist:

• All 5 components present (React, Express, PostgreSQL, Google OAuth, user browser)
• Subgraphs separate internal from external
• Connections labeled with protocol
• Under 12 nodes total

✅ Quick Check: You’re starting the architecture diagram and realize the system also uses Redis for caching. Should you add it? (Yes — if Redis is a component that other services interact with, it belongs in the architecture overview. Add it as a node connected to the Express API, inside the backend subgraph. The architecture diagram should show all components the team needs to know about.)

Diagram 2: Authentication Flow (Sequence Diagram)

Zoom into the OAuth login process. Use a sequence diagram to show the message flow.

What to include:

• Participants: User browser, React app, Express API, Google Auth
• The full OAuth flow: redirect, login, callback, token exchange
• Error handling: what happens if authentication fails

Exercise: Create a sequence diagram showing the complete Google OAuth flow. Include activation boxes on the Express API during token validation, and an alt block for success vs. failure after credential verification.

Review checklist:

• Four participants with correct types (actor for user, participant for systems)
• Solid arrows for requests, dashed for responses
• Activation boxes on the API during processing
• Alt block for success/failure path

Diagram 3: Database Schema (ER Diagram)

Document the data model. Use an ER diagram for the task management database.

What to include:

• Entities: User, Project, Task, Comment
• Attributes with types and keys (PK, FK)
• Relationships with correct cardinality

Relationships to model:

• A user belongs to many projects (many-to-many — you’ll need a join table or use Mermaid’s relationship syntax)
• A project has many tasks
• A task has many comments
• A user creates many tasks
• A user writes many comments

Exercise: Create the ER diagram. Include at least 3 attributes per entity. Mark all primary and foreign keys.

Review checklist:

• All entities present with attributes
• PK and FK marked
• Cardinality is correct on all relationships
• User-to-Project relationship handled (many-to-many)

Diagram 4: Project Timeline (Gantt Chart)

Plan the development phases. Use a Gantt chart with dependencies.

Phases to include:

1. Design (wireframes, UI mockups, design review milestone)
2. Backend (API setup, auth integration, database schema)
3. Frontend (component library, page implementation, API integration)
4. Launch (QA testing, staging deployment, production launch milestone)

Exercise: Create a Gantt chart with at least 10 tasks across 4 phases. Use after for dependencies between phases. Include at least 2 milestones.

Review checklist:

• Four sections (phases) with multiple tasks each
• Dependencies using after keyword
• At least 2 milestones
• Realistic durations (not all tasks the same length)

Course Review

Here’s what you learned across all 8 lessons:

Your Diagram Quick Reference

Starting a diagram:

• flowchart TD / flowchart LR — flowcharts
• sequenceDiagram — sequence diagrams
• erDiagram — ER diagrams
• stateDiagram-v2 — state diagrams
• gantt — Gantt charts
• classDiagram — class diagrams
• mindmap — mind maps

Common syntax:

• Nodes: [rectangle], (rounded), {diamond}, ((circle)), [(cylinder)]
• Arrows: --> directed, --- undirected, -->|label| labeled, -.-> dotted, ==> thick
• Grouping: subgraph Name ... end

AI prompting formula:

Create a Mermaid [TYPE] showing [WHAT]. Participants: [LIST]. Flow: [DESCRIBE]. Use only ASCII characters.

Key Takeaways

• Start documentation with the architecture overview — it provides context for all other diagrams
• Use different diagram types for different views: flowcharts for processes, sequence diagrams for interactions, ER diagrams for data, Gantt charts for timelines
• Each diagram should answer one specific question — don’t combine everything into one
• Maintain diagrams alongside code — update both in the same pull request
• AI generates the first draft; your Mermaid knowledge lets you review, edit, and refine

What’s Next

You’ve completed the course. Here’s how to keep building:

1. Document your current project — Start with one architecture diagram. Add more as needed.
2. Use AI daily — Prompt ChatGPT or Claude to generate diagrams from your meeting notes, design discussions, or code reviews.
3. Set up your tools — Install the VS Code extension, bookmark the Live Editor, add a diagram template to your PR process.
4. Explore new diagram types — Mermaid keeps adding types. Architecture diagrams (v11.1), kanban boards (v11.4), and radar charts are all recent additions.

Diagrams-as-code is a compounding skill. Every diagram you create makes your projects clearer, your documentation more useful, and your collaboration smoother. The syntax is simple. The impact is significant.