Bluefish: Composing Diagrams with Declarative Relations

Josh Pollock,Catherine Mei,Grace Huang,Elliot Evans,Daniel Jackson,Arvind Satyanarayan

DOI: https://doi.org/10.1145/3654777.3676465

2024-07-26

Abstract:Diagrams are essential tools for problem-solving and communication as they externalize conceptual structures using spatial relationships. But when picking a diagramming framework, users are faced with a dilemma. They can either use a highly expressive but low-level toolkit, whose API does not match their domain-specific concepts, or select a high-level typology, which offers a recognizable vocabulary but supports a limited range of diagrams. To address this gap, we introduce Bluefish: a diagramming framework inspired by component-based user interface (UI) libraries. Bluefish lets users create diagrams using relations: declarative, composable, and extensible diagram fragments that relax the concept of a UI component. Unlike a component, a relation does not have sole ownership over its children nor does it need to fully specify their layout. To render diagrams, Bluefish extends a traditional tree-based scenegraph to a compound graph that captures both hierarchical and adjacent relationships between nodes. To evaluate our system, we construct a diverse example gallery covering many domains including mathematics, physics, computer science, and even cooking. We show that Bluefish's relations are effective declarative primitives for diagrams. Bluefish is open source, and we aim to shape it into both a usable tool and a research platform.

Graphics,Human-Computer Interaction,Programming Languages

What problem does this paper attempt to address?

### What problem does this paper attempt to solve?

This paper aims to solve the trade - off problem between expressiveness and abstraction in current chart - drawing frameworks. Specifically, existing chart - drawing tools are either very flexible but low - level (such as D3 or p5.js), requiring users to handle low - level details unrelated to domain - specific concepts; or they provide high - level graph representation examples (such as Mermaid), but are limited to a limited number of chart types and have few customization options.

To bridge this gap, the author introduced **Bluefish**: a chart - drawing framework inspired by modern component - based user interface (UI) libraries such as React. The core innovation of Bluefish is that it relaxes the traditional component model into "relations", allowing child elements to be shared with multiple parent nodes through declarative references, thus better supporting the overlapping relationships common in charts.

#### Main problems and solutions

1. **Trade - off between expressiveness and abstraction**:
- **Problems with existing tools**: Highly expressive tools (such as D3, p5.js) make users handle low - level details unrelated to domain - specific concepts (such as DOM operations or Canvas drawing commands), while high - level tools (such as Mermaid) limit users to using only predefined chart types.
- **Bluefish's solution**: By introducing the concept of "relations", Bluefish relaxes the limitations of the traditional component model, allowing child elements to be shared by multiple parent nodes and not requiring their layout to be fully specified. This enables users to draw complex charts more flexibly while maintaining declarativeness, composability and extensibility.

2. **Hierarchical structure and overlapping relationships**:
- **Problems with existing tools**: Traditional UI components can only be associated with each other through hierarchical nesting, which divides the visual plane into isolated parts and makes it difficult to achieve cross - hierarchical overlapping relationships.
- **Bluefish's solution**: Bluefish allows elements in the chart to participate in multiple relationships, for example, an element can participate in both horizontal and vertical arrangements at the same time. This design enables chart authors to take advantage of locality when needed and express complex relationships when necessary.

3. **Declarative and procedural**:
- **Problems with existing tools**: Many tools require users to perform low - level operations such as explicit bounding box calculations, which increases the user's cognitive burden.
- **Bluefish's solution**: Bluefish provides a declarative programming method. Users only need to describe the structure and relationships of the chart, without having to worry about specific layout details. This allows users to focus on expressing the semantics of the chart rather than underlying calculation and rendering problems.

4. **Extensibility**:
- **Problems with existing tools**: Basic graphic shapes and elements (such as rectangles, circles, lines and text) may not be able to express the specific semantics of certain domains well.
- **Bluefish's solution**: Bluefish provides the ability to create domain - specific primitives. Users can customize chart elements as needed to better match the vocabulary and requirements of their domain.

### Conclusion

By introducing the concept of "relations", Bluefish solves the trade - off problem between expressiveness and abstraction in existing chart - drawing tools, and provides a more flexible, declarative and extensible chart - drawing method, which is suitable for complex chart - drawing requirements in multiple fields from computer science to physics.