docs: add Mermaid diagrams

docs/diagram-maintenance.md

@@ -0,0 +1,121 @@
+---
+id: diagram-maintenance
+title: 'Maintaining and Updating Diagrams'
+sidebar_label: 'Maintaining and Updating Diagrams'
+keywords:
+  - 'diagram'
+  - 'mermaid'
+  - 'process flowchart'
+  - 'process diagram'
+  - 'process flow'
+  - 'process workflow'
+  - 'workflow diagram'
+  - 'workflow flowchart'
+  - 'workflow flow'
+---
+
+# Maintaining and Updating Diagrams
+
+## Overview
+
+This guide explains how to maintain and update the process flowcharts and diagrams in this documentation. The diagrams are created using Mermaid, a text-based diagramming tool that renders directly in GitHub.
+
+## When to Update
+
+Update diagrams when:
+
+- Process workflows change (steps added, removed, or reordered)
+- Users report confusion about a step or decision point
+- Errors or inaccuracies are identified
+- Better clarity or accessibility is needed
+
+## How to Update
+
+### 1. Locate the Diagram
+
+Find the Mermaid code block in the documentation file. It will look like this:
+
+````markdown
+```mermaid
+graph TD
+    A[Start] --> B[Step 1]
+```
+````
+
+### 2. Edit the Diagram
+
+**Using GitHub Web Editor:**
+
+1. Click the pencil icon (Edit this file) on the documentation page
+2. Modify the Mermaid syntax between the code blocks
+3. Click the Preview tab to see your changes rendered
+4. Commit with a descriptive message like "Update [process] diagram: [what changed]"
+
+**Using Local Development:**
+
+1. Clone the repository and create a branch
+2. Edit the Mermaid syntax in your text editor
+3. Preview using [Mermaid Live Editor](https://mermaid.live) or a VS Code Mermaid extension
+4. Commit and push your changes
+
+### 3. Test Your Changes
+
+Before submitting:
+
+- Verify the diagram renders correctly in GitHub preview
+- Check that all connections and labels are accurate
+- Ensure the flow matches the actual process
+- Confirm labels are clear and concise
+
+## Quick Syntax Reference
+
+### Common Mermaid Elements
+
+```mermaid
+graph TD
+    Start([Start/End]) --> Process[Action Step]
+    Process --> Decision{Question?}
+    Decision -->|Yes| ActionA[Option A]
+    Decision -->|No| ActionB[Option B]
+    ActionA --> End([End])
+    ActionB --> End
+```
+
+**Node types:**
+
+- `([...])` - Start/End (rounded)
+- `[...]` - Process step (rectangle)
+- `{...}` - Decision point (diamond)
+
+**Connections:**
+
+- `-->` - Arrow
+- `-->|text|` - Labeled arrow
+
+## Best Practices
+
+- **Be clear**: Use action-oriented labels ("Submit Form" not "Submission")
+- **Be concise**: Keep node text short
+- **Be consistent**: Use the same shapes for the same purposes across all diagrams
+- **Be accessible**: Ensure labels are meaningful for screen readers
+
+## Troubleshooting
+
+**Diagram won't render?**
+
+- Check that all brackets are properly matched
+- Copy your code to [Mermaid Live Editor](https://mermaid.live) to find syntax errors
+- Use quotes around text with special characters: `["Text: with special chars"]`
+
+**Diagram too complex?**
+
+- Break into multiple smaller diagrams
+- Remove unnecessary detail
+- Focus on the main workflow
+
+## Resources
+
+Need more help? Consider checking out these resources:
+
+- [Mermaid Documentation](https://mermaid.js.org/)
+- [Mermaid Live Editor](https://mermaid.live) - Test diagrams before committing

docs/lightning-talks/processes/project-workflow.md

@@ -1,5 +1,5 @@
 ---
-id: project-workflow
+id: lightning-talks-project-workflow
 title: 'Lightning Talk Project Workflow'
 sidebar_label: 'Facilitator Guidelines'
 keywords:
@@ -43,6 +43,23 @@ The function of the Lightning Talks Event is to allow opportunities for members
 
 ### Timeline
 
+```mermaid
+flowchart TD
+  A[Call for Coordinators, Mentors, and Teammates] --> B[Clarify Roles and Onboard Team]
+  B --> C[Team Meeting and Assign Coordinators]
+  C --> D[Call for Proposals (CFP) Opens]
+  D --> E[Collect Speaker Proposals via GitHub Form]
+  E --> F[CFP Closes - Team Lead Creates Groups]
+  F --> G[Organize Talks]
+  G --> H[Create Coordinator Issue Cards & Checklists]
+  H --> I[Collect Speaker Info (Bio, Headshot, Slides)]
+  I --> J[Centralize All Information in Shared Folder]
+  J --> K[Coordinators Update Checklists]
+  K --> L[Week of Event - Send Directions to Speakers]
+  L --> M[Speakers Deliver Lightning Talks]
+  M --> N[Videos Processed & Uploaded to YouTube]
+```
+
 #### Call for coordinators, mentors, and other teammates
 
 - Happens before the cfp to create a smoother onboarding process

docs/lunch-and-learns/process-docs.md

@@ -85,6 +85,18 @@ Includes Editors and Graphics Coordinator (GC) who handle post-event cleanup of
 
 #### Scheduling Workflow
 
+```mermaid
+graph TD
+  A[Speaker submits request form] --> B[LC & DW receive form]
+  B --> C[LC checks calendar for available dates]
+  C --> D{Dates available?}
+  D -->|Yes| E[Confirm Host and Moderator availability]
+  D -->|No| F[LC requests new time slots from Speaker]
+  E --> G[LC sends confirmation email to Speaker]
+  G --> H[LC adds event to Google Calendar]
+  H --> I[DW updates issue and assigns Moderator]
+```
+
 1. The LC checks the calendar for availability in order of the Speaker's preferred dates.
 
    a. If any of the Speaker's suggested time slots are available, continue to step 2.

docs/monthly-challenges/facilitators-docs/facilitate-a-challenge.md

@@ -39,6 +39,23 @@ If you have ideas for a new challenge(s), you can propose and discuss them in th
 
 ## Before the Challenge
 
+```mermaid
+flowchart TD
+  A[Challenge Planning Begins] --> B[Share Availability in #vc-monthly-challenge-team]
+  B --> C[Propose or Discuss New Challenge Ideas]
+  C --> D[Coordinate with Coffee Table Group Hosts]
+  D --> E[Write Blog Post on DEV]
+  E --> F[Submit Blog Post for Proofreading]
+  F --> G[Update Challenge Pages on Website]
+  G --> H[First Day of Month: Update #monthly-challenge Channel]
+  H --> I[Announce New Challenge in #announcements]
+  I --> J[During Challenge: Monday Goals Check-In]
+  J --> K[Weekly Async Check-Ins in Slack]
+  K --> L[Automate Check-Ins with Slack Bot (If Needed)]
+  L --> M[Post-Challenge: Share Feedback in #vc-monthly-challenge-team]
+  M --> N[Update Challenge README with Scripts, Notes, and Blog Links]
+```
+
 ### Coordinating with the Coffee Table Groups
 
 We love collaboration! We're happy to involve our [Coffee Table Groups](https://virtualcoffee.io/resources/virtual-coffee-handbook/guides-to-virtual-coffee/coffee-table-groups) in our challenges whenever possible. Besides giving more support to our community, our goal is that the community becomes more familiar with the Coffee Table Groups and can encourage them to attend the groups more and, ultimately, give them support through volunteering.
@@ -105,7 +122,6 @@ Some challenges require daily check-in. You can automate it using the Slack bot.
 
 - Provide feedback in the `#vc-monthly-challenge-team` channel, like what went well and what could've gone better for the challenge. Let us know what support you need and what things you think would be nice to do next time.
 - Update the README file in the challenge's folder with:
-
   - new script templates and things we did for the challenge,
   - the month and year of the challenge,
   - the blog post(s) for the challenge, if any.

docusaurus.config.js

@@ -16,7 +16,11 @@ const config = {
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
-
+  // Set theme for mermaid diagrams here
+  themes: ['@docusaurus/theme-mermaid'],
+  markdown: {
+    mermaid: true,
+  },
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'Virtual-Coffee', // Usually your GitHub org/user name.

package.json

@@ -19,16 +19,18 @@
   "dependencies": {
     "@docusaurus/core": "3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
-    "react": "^19.0.0",
+    "@docusaurus/theme-mermaid": "3.7.0",
+    "@mdx-js/react": "3.0.0",
+    "clsx": "2.0.0",
+    "flag": "5.0.1",
+    "prism-react-renderer": "2.3.0",
+    "react": "19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",
     "@docusaurus/types": "3.7.0",
-    "prettier": "^2.2.1"
+    "prettier": "2.2.1"
   },
   "browserslist": {
     "production": [