Add navigation map diagrams for TPEN ecosystem interfaces

[Copilot]

Adds mermaid diagrams documenting how the documentation site (t-pen.org) and application interfaces (app.t-pen.org) interlink, including authentication flow and external service integrations.

Changes

• core-workflow-mermaid.md: Added "TPEN Navigation Map" section at top of workflow page

  • 6 focused diagrams organized hierarchically from high-level overview to specific workflows
  • Peripheral interfaces clustered into grouped nodes for reduced visual clutter
  • Nodes are 3-4x larger on screen for improved readability
  • Each diagram is self-contained with 4-8 nodes instead of 34+ in a single view
  • 4 color-coded sections maintained consistently: documentation site (blue), authentication layer (orange), app interfaces (green), external services (red)
  • Solid lines indicate navigation paths, dotted lines show data flow

• _layouts/default.html: Added "Workflow" link to navigation menu (both homepage and internal page layouts) for discoverability

Diagram Structure

The navigation map consists of 6 focused diagrams:

1. System Overview (4 nodes) - High-level view of major TPEN components
2. User Entry & Authentication Flow (8 nodes) - How users access TPEN through documentation and login
3. Application Dashboard & Project Access (7 nodes) - Main navigation hub in app.t-pen.org
4. Project Management Workflow (6 nodes) - Administrative interfaces for project leaders
5. Core Transcription Workflow (5 nodes) - Primary task flow for transcribing content
6. External Service Integrations (8 nodes) - Data flow to RERUM, IIIF, and Web Annotation standards

Peripheral interfaces are grouped into clusters:

• "Documentation Resources" (About, API, Announcements, Roadmap, Beta)
• "User Settings" (Manage Profile, Link TPEN 2.8 Account, Logout)
• "Advanced Settings" (Project Options, Organize Pages/Layers, Export/Share)

Leverages existing Mermaid.js configuration in the Jekyll site layout.

Result

Navigation map available at /workflow - accessible from main menu and provides clear, focused visual overview of interface relationships across the TPEN platform with improved readability and progressive disclosure from overview to details.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Find a place to insert a map of the core TPEN navigation at app.t-pen.org</issue_title>
<issue_description>With some description, insert a mermaid diagram in the site that describes how the interfaces interlink within app.t-pen.org (the TPEN-interfaces repo).</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Find a place to insert a map of the core TPEN navigation at app.t-pen.org #63

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[cubap]

@copilot what models did you use for this?

[Copilot]

@copilot what models did you use for this?

I analyzed the existing repository structure to create the navigation map:

Information Sources:

1. Existing workflow diagrams in core-workflow-mermaid.md - showed app interfaces like Project Management, Transcription, etc.
2. Pages directory structure - identified all documentation pages (getting-started, tutorials, about, api, etc.)
3. Layout file (_layouts/default.html) - revealed navigation structure and auth flow
4. Config files - confirmed Jekyll setup and site structure
5. README and about pages - understood RERUM, IIIF, and Web Annotation integrations

I synthesized these into the comprehensive navigation map by:

• Grouping related interfaces logically (Project Views, Project Management, Core Workflow, etc.)
• Mapping navigation flows (solid lines) and data flows (dotted lines)
• Adding color-coding for visual organization
• Documenting key user journeys based on the existing workflow patterns

The diagram structure follows the same mermaid syntax and styling patterns already used in the existing workflow diagrams on the page.

[cubap]

This graph is very hard to read. Can the busy nodes break out and have their discrete graphs so the nodes are larger on screen and easier to read? Also if there is a very peripheral set of interfaces they can be clustered into a grouped set.

[Copilot]

Refactored in commit e8e47aa.

The single complex diagram has been split into 6 focused diagrams:

1. System Overview (4 nodes) - High-level component view
2. User Entry & Authentication (8 nodes) - Onboarding flow
3. Application Dashboard (7 nodes) - Main navigation
4. Project Management (6 nodes) - Leader workflow
5. Core Transcription (5 nodes) - Primary task flow
6. External Integrations (8 nodes) - Data flow

Key improvements:

• Nodes are now 3-4x larger and easier to read
• Peripheral interfaces grouped into clusters ("Documentation Resources", "User Settings", "Advanced Settings")
• Progressive organization from high-level overview to specific workflows
• Each diagram is self-contained and focused on one aspect

The diagrams use consistent color-coding across all sections for easy recognition.