H5P Diagram is a flexible content type for creating visual, structured diagrams inside the H5P editor.
It currently supports two diagram formats:
- Euler diagrams (similar to Venn diagrams)
- Pyramid diagrams with customizable steps and optional inversion
The content type is designed to be simple, responsive, and accessible.
Create simple Euler-style set diagrams to illustrate:
- Category relationships
- Set overlaps
- Shared vs unique attributes
Each circle supports:
- Custom label
- Relative size
- Color
- Optional label hiding
- Author-defined intersections
Additional options:
- Tooltips
- Highlight on hover
Display layered or hierarchical information in a clean triangular layout.
Useful for:
- Priority levels
- Organizational hierarchies
- Educational models
- Concept breakdowns
Each step supports:
- A label
- Optional descriptive text
- Custom color
- Automatic contrast-aware text (WCAG AA heuristic)
Additional layout options:
- Invert pyramid (point up or point down)
- Label position: center, outside left, outside right
Both diagram types provide:
- Hover highlighting for circles, intersections, and steps
- Tooltips for quick explanations
- Automatic text contrast on pyramid labels
- Responsive layout that adapts to fullscreen or embedded mode
- Add the H5P Diagram content type in your H5P editor.
- Choose a diagram type:
- Euler
- Pyramid
- Enter your circles or steps with labels, colors, and descriptions.
- Configure optional interactions such as highlight or tooltips.
- Save and embed the diagram anywhere H5P is supported.
This content type uses:
- D3.js for SVG manipulation
- venn.js for Euler diagram layout
- Webpack for bundling
- A modular structure (
diagram.js,eulerDiagram.js,pyramidDiagram.js) - Shared constants for consistent layout and styling
Designed to allow new diagram types to be added in future versions.
MIT License
Copyright (c) 2025 Ethan Lin
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.