Skip to content

Add diagram support #8

Description

@natolambert

Summary

Add support for rendering diagrams from text definitions inside fenced code blocks, complementing the existing chart blocks (which handle data visualization).

Motivation

Research talks frequently need structural/flow diagrams — model architectures, training pipelines, system diagrams, timelines. Currently these require external image files. Text-based diagrams would be git-friendly, agent-drivable, and consistent with Colloquium's markdown-native philosophy.

Proposed syntax

graph LR
    A[Training Data] --> B[SFT]
    B --> C[Reward Model]
    C --> D[RLHF]
    D --> E[Aligned Model]
Loading

Options

  • Mermaid.js — most popular, broad diagram type support (flowcharts, sequence, Gantt, state, mindmap, quadrant). Single JS file, CDN-loadable. Already used by GitHub markdown rendering.
  • Other libraries to evaluate: D2, Pikchr

Use cases for research talks

  • Model architecture flowcharts (data → SFT → RM → PPO)
  • System/infrastructure diagrams
  • Gantt-style research timelines
  • Sequence diagrams (multi-agent interactions, API flows)

Implementation notes

  • Follows the existing pattern: CDN script (like KaTeX, highlight.js), fenced code block handler in build.py
  • No new Python dependencies needed
  • Diagrams render as inline SVG in the self-contained HTML output
  • Charts = data visualization (bar, line, scatter); Diagrams = structural/flow — no overlap

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions