We are working on lots of new tools to help our clients get their work done more easily and where we can, we will be release elements for anyone to make use of. This is the release of our Radial Diagram Generator – a lightweight, JSON-configurable tool for creating radial diagrams.

What is it?

The Radial Diagram Generator creates professional-looking circular/radial diagrams commonly used for:

• Maturity assessments – Digital maturity, PMO maturity, capability assessments
• Capability wheels – Visualising organisational capabilities across domains
• Framework diagrams – Presenting multi-dimensional frameworks in an engaging way
• Scorecard visualisations – Showing progress or scores across multiple categories

These types of diagrams are frequently seen in consulting deliverables, strategy documents, and assessment reports.

This is a library for developers to use, but if you want to have a play with it, you can see the demo page here: https://cgamanagement.co.uk/tool-demos/radial-diagram.html

Why we built it

Creating these diagrams manually in PowerPoint or design tools is time-consuming and inconsistent. Updating scores or labels means redrawing elements. We wanted a tool that:

• Uses simple JSON configuration – edit text, change colours, update scores
• Auto-renders changes in real-time as you edit
• Produces clean SVG output that scales perfectly
• Supports PNG export for presentations
• Is completely client-side – no server, no data leaves your browser

Key Features

Smart Text Handling

• Auto-scaling segment labels – long names automatically fit within their arc
• Golden ratio proportions – segment label arcs use mathematically pleasing dimensions
• Hub text auto-sizing – centre text scales to fill available space

Flexible Styling

• Configurable colours for segments, hub, dividers, and rings
• Background colour support (great for dark themes)
• Score visualisation with configurable rings and labels
• Optional facet points and various display styles

Export Options

• SVG download – vector format for perfect scaling
• PNG download – 2x resolution with background colour

Example Use Cases

The repository includes several example configurations based on real-world frameworks:

1. Digital Maturity Assessment – Based on Grant Thornton’s digital maturity model
2. PMO Maturity (PMOMEM) – Based on PMO Global Institute’s maturity evolution model
3. Business Intelligence Capabilities – BI capability assessment wheel
4. Digital Transformation – Global digital transformation framework

Try It Out

GitHub Repository: github.com/andycop/radial-diagram

or here: https://cgamanagement.co.uk/tool-demos/radial-diagram.html

Quick Start

git clone https://github.com/andycop/radial-diagram.gitcd radial-diagramnpm installnpm run buildnpm run demo

Then open http://localhost:3000 in your browser. Select an example from the dropdown or edit the JSON configuration directly.

Configuration Overview

The JSON configuration is straightforward:

{ "_source": "Your source attribution", "size": 800, "center": { "label": "Hub Label", "radius": 100, "color": "#702082" }, "segments": [ { "name": "Segment Name", "color": "#E6A817", "facets": [ { "name": "Facet 1", "score": 3 }, { "name": "Facet 2", "score": 4 } ] } ], "style": { "segmentFontSize": 24, "facetFontColor": "#000000", "showRings": true }}

What’s Next?

This is an initial release focused on the core functionality. We’re considering:

• Additional export formats
• Preset colour themes
• Animation support for presentations
• Integration with data sources

We welcome contributions and feedback via GitHub issues.

---

Built with TypeScript and SVG. No external dependencies for the core renderer.