commune/brand
5
0
Fork 0
forked from brad/brand-guidelines
Code Issues Pull requests Activity Actions

feat(mermaid): add visual language references and diagram templates #1

Closed
agent wants to merge 3 commits from feat/mermaid-visual-language into main
pull from: feat/mermaid-visual-language
merge into: commune:main
Conversation 4 Commits 3 Files changed 8 +1914 -200
agent commented 2026-03-02 10:47:32 -08:00
Owner
Copy link

Summary

Synthesizes the mermaid visual language work from commune/skills#89 into the brand guidelines structure.

This PR integrates researcher's visual language design system into commune/brand, establishing consistent color palettes and reusable diagram templates for all commune outputs.

What's Included

Color Palettes (references/mermaid/color-palettes.md)

  • Core Palette — Based on existing commune visual identity (from researcher's 2026-02-22 theory map)
  • Dark Mode Palette — For Discord and dark-themed documentation
  • Semantic Colors — State-based colors (success, error, warning, etc.)
  • Accessibility Guidelines — WCAG-compliant contrast, color-blind considerations
  • Color MCP Integration — How to use the color MCP server for palette generation

Diagram Templates (references/mermaid/templates/)

  1. Process Flows — Linear processes, decision trees, approval workflows, error handling, parallel processing, feedback loops
  2. Architecture — Layered architecture, microservices, data pipelines, hub-and-spoke, event-driven, MCP networks, deployment topology
  3. Timelines — Gantt charts, historical timelines, state evolution, milestones, retrospectives, version history
  4. State Machines — Authentication flows, resource lifecycles, approval workflows, connection states, nested/parallel states, CI/CD pipelines

Navigation (references/mermaid/README.md)

  • Quick start guide for using templates
  • Usage examples
  • Platform-specific notes (Forgejo, Discord, Obsidian, Hugo)
  • Contribution guidelines for new templates

Context

This addresses the "visual language / design system" proposal from the 2026-02-22 weekly meeting. The researcher identified a need for consistent visual design across commune outputs.

By integrating this work into commune/brand (forked from brad/brand-guidelines), we now have:

  • A single source of truth for commune visual identity
  • Reusable templates that any agent can use
  • Integration with the existing brand build system

Next Steps

Once this PR is approved and merged:

  1. Update commune/skills mermaid SKILL.md to reference commune/brand
  2. Close commune/skills#89 (the original PR that created this content)
  3. Update other skills to reference brand guidelines when creating visuals

Closes commune/skills#89

## Summary Synthesizes the mermaid visual language work from [commune/skills#89](https://git.brads.house/commune/skills/pulls/89) into the brand guidelines structure. This PR integrates researcher's visual language design system into commune/brand, establishing consistent color palettes and reusable diagram templates for all commune outputs. ## What's Included ### Color Palettes (`references/mermaid/color-palettes.md`) - **Core Palette** — Based on existing commune visual identity (from researcher's 2026-02-22 theory map) - **Dark Mode Palette** — For Discord and dark-themed documentation - **Semantic Colors** — State-based colors (success, error, warning, etc.) - **Accessibility Guidelines** — WCAG-compliant contrast, color-blind considerations - **Color MCP Integration** — How to use the color MCP server for palette generation ### Diagram Templates (`references/mermaid/templates/`) 1. **Process Flows** — Linear processes, decision trees, approval workflows, error handling, parallel processing, feedback loops 2. **Architecture** — Layered architecture, microservices, data pipelines, hub-and-spoke, event-driven, MCP networks, deployment topology 3. **Timelines** — Gantt charts, historical timelines, state evolution, milestones, retrospectives, version history 4. **State Machines** — Authentication flows, resource lifecycles, approval workflows, connection states, nested/parallel states, CI/CD pipelines ### Navigation (`references/mermaid/README.md`) - Quick start guide for using templates - Usage examples - Platform-specific notes (Forgejo, Discord, Obsidian, Hugo) - Contribution guidelines for new templates ## Context This addresses the "visual language / design system" proposal from the 2026-02-22 weekly meeting. The researcher identified a need for consistent visual design across commune outputs. By integrating this work into commune/brand (forked from brad/brand-guidelines), we now have: - A single source of truth for commune visual identity - Reusable templates that any agent can use - Integration with the existing brand build system ## Next Steps Once this PR is approved and merged: 1. Update commune/skills mermaid SKILL.md to reference commune/brand 2. Close commune/skills#89 (the original PR that created this content) 3. Update other skills to reference brand guidelines when creating visuals Closes commune/skills#89
Synthesizes the mermaid visual language work from commune/skills into the brand
guidelines structure. Includes:

- Color Palettes (core, dark mode, semantic)
- Diagram Templates (process flows, architecture, timelines, state machines)
- Usage guidelines and platform-specific notes
- Integration with Color MCP for palette generation

Closes commune/skills#89
brad commented 2026-03-02 10:56:08 -08:00
Owner
Copy link

@agent we need to incorporate this into the brand.yml schema, not just make a mermaid reference.

take the information from that and create the brand.yml

@agent we need to incorporate this into the brand.yml schema, not just make a mermaid reference. take the information from that and create the brand.yml
- Add visual_language section as first-class brand element
- Include diagram types (process_flow, architecture, timeline, state_machine, data_chart, infographic)
- Define palettes for different contexts (core_diagram, semantic, dark_mode, data_viz)
- Document platform-specific rendering (Forgejo, Discord, Obsidian, Hugo)
- Add accessibility requirements for diagrams
- Reference MCP tools (mermaid, chart, infographic, color) with usage examples
- Integrate colors from theory map (lavender, coral, gold, mint)
- Add semantic colors for process diagrams
- Include dark mode palette for Discord/dark contexts

Addresses @brad feedback in PR #1 — visual language is now part of
brand.yml schema, not just external markdown references.
agent commented 2026-03-02 11:12:48 -08:00
Author
Owner
Copy link

Done. I've incorporated the visual language information into brand.yml as a first-class schema section.

What Changed

Before: Mermaid references were separate markdown files in references/mermaid/

After: Visual language is now part of the brand schema in brand.yml under a dedicated visual_language section.

New Structure

visual_language section includes:

  1. Principles — core guidelines for all diagrams
  2. Diagram Types — 6 types with palettes, patterns, and templates:
    • Process flows (semantic palette)
    • Architecture diagrams (core palette)
    • Timelines (core palette)
    • State machines (semantic palette)
    • Data charts (data_viz palette)
    • Infographics (core palette)
  3. Platforms — rendering guidance for Forgejo, Discord, Obsidian, Hugo
  4. Accessibility — WCAG requirements, testing procedures
  5. Tools — MCP servers with usage examples (mermaid, chart, infographic, color)

Color Palettes

Added 4 named palettes in the palettes section:

  • core_diagram — theory map colors (lavender, coral, gold, mint, sky, cream)
  • semantic — process flows (success, active, waiting, error, complete)
  • dark_mode — Discord/dark contexts (deep blue, electric blue, cyan, neon green, neon coral)
  • data_viz — ordered sequence for charts

Usage

Now when building brand outputs, the visual language section will be processed alongside colors, typography, and logos — making diagram consistency a first-class brand concern.

The external markdown references still exist for detailed templates, but the schema now defines the core visual grammar.

Commit: db99671

Done. I've incorporated the visual language information into `brand.yml` as a first-class schema section. ## What Changed **Before:** Mermaid references were separate markdown files in `references/mermaid/` **After:** Visual language is now part of the brand schema in `brand.yml` under a dedicated `visual_language` section. ## New Structure ### `visual_language` section includes: 1. **Principles** — core guidelines for all diagrams 2. **Diagram Types** — 6 types with palettes, patterns, and templates: - Process flows (semantic palette) - Architecture diagrams (core palette) - Timelines (core palette) - State machines (semantic palette) - Data charts (data_viz palette) - Infographics (core palette) 3. **Platforms** — rendering guidance for Forgejo, Discord, Obsidian, Hugo 4. **Accessibility** — WCAG requirements, testing procedures 5. **Tools** — MCP servers with usage examples (mermaid, chart, infographic, color) ### Color Palettes Added 4 named palettes in the `palettes` section: - **core_diagram** — theory map colors (lavender, coral, gold, mint, sky, cream) - **semantic** — process flows (success, active, waiting, error, complete) - **dark_mode** — Discord/dark contexts (deep blue, electric blue, cyan, neon green, neon coral) - **data_viz** — ordered sequence for charts ## Usage Now when building brand outputs, the visual language section will be processed alongside colors, typography, and logos — making diagram consistency a first-class brand concern. The external markdown references still exist for detailed templates, but the schema now defines the core visual grammar. --- Commit: db99671
fix(ci): use FORGEJO_TOKEN for git authentication
Some checks failed
Validate brand.yml / validate (pull_request) Failing after 21s
Details
e651670cb7 
Fixes #2 - workflow was using github.token which lacks write permissions.
Updated all git operations to use secrets.FORGEJO_TOKEN:
- Initial repository clone
- Commit generated files push
- Publish exports to pages branch
brad commented 2026-03-02 12:22:19 -08:00
Owner
Copy link

@agent submit the fix on a new PR, main has been updated and i'm closing this branch

@agent submit the fix on a new PR, main has been updated and i'm closing this branch
brad closed this pull request 2026-03-02 12:22:19 -08:00
agent commented 2026-03-02 12:26:02 -08:00
Author
Owner
Copy link

New PR submitted as #4 — rebased onto updated main.

All mermaid visual language references preserved (color palettes + diagram templates), but removed brand.yml and workflow changes since those were already integrated in main.

New PR submitted as #4 — rebased onto updated main. All mermaid visual language references preserved (color palettes + diagram templates), but removed brand.yml and workflow changes since those were already integrated in main.
Some checks failed
Validate brand.yml / validate (pull_request) Failing after 21s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
  
lit-review

Comprehensive literature survey needed (academic papers, peer-reviewed sources)

  
research-request

General research task — @researcher will investigate and report findings

  
source-needed

Article needs academic depth or primary source verification

No labels
lit-review
research-request
source-needed
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
commune/brand!1
No description provided.