Feature Request: Slice explode, donut/ring mode, and configurable legend placement for pie charts

[EmnaBarbouch]

The Mermaid pie chart covers the basics well — proportional slices, title, and label positioning via textPosition. However, three standard charting capabilities are missing that significantly limit its use in presentations, documentation sites, and dashboards:

• Slice explode — offset one or more named slices outward to draw attention to them
• Donut / ring mode — hollow center with a configurable inner radius ratio, supporting a central label
• Legend placement control — move the legend to bottom, right, or suppress it entirely

All three should integrate with the existing %%{init: {"pie": {...}}}%% config pattern and be theme-agnostic.

---

Background & Context

Pie charts in Mermaid are frequently used to embed data summaries in READMEs, wiki pages, and technical blog posts. The current feature set is minimal by design, but users consistently hit walls when trying to produce presentation-quality output:

• There is no way to highlight a dominant slice visually without manually editing the SVG output after each render
• Donut charts are widely preferred in modern dashboards because the hollow center can carry a summary value or icon — no equivalent exists in Mermaid today
• The auto-positioned legend frequently overlaps with slice labels when textPosition is set above 0.7, and there is no config escape hatch

All three features are standard in D3, Chart.js, Recharts, and Vega-Lite — their absence positions Mermaid's pie chart as a demo-only diagram type that cannot be used in production documentation.

---

Proposed Syntax & Config

Slice explode:

%%{init: {"pie": {"explode": {"Dogs": 0.12}}}}%%
pie title Animal adoption
  "Dogs": 386
  "Cats": 85
  "Rats": 15

The value (e.g. 0.12) is the fraction of the outer radius by which the slice is offset outward. A shorthand "explodeAll": 0.05 offsets every slice equally.

Donut / ring mode:

%%{init: {"pie": {"donut": true, "donutRadius": 0.55, "donutLabel": "486 total"}}}%%

donutRadius is a ratio between 0 and 1 (inner radius / outer radius). Default when donut: true is 0.5. donutLabel renders centered text in the hollow.

Legend placement:

%%{init: {"pie": {"legendPosition": "bottom"}}}%%

Accepted values: "right" (current default), "bottom", "left", "top", "none".

---

Visual Behavior

• Exploded slices animate smoothly in browser rendering; render statically in SVG export mode
• Donut center label scales font size automatically to fit within the inner circle
• Legend placement changes reflow the chart area so total SVG height stays within declared chartHeight
• All options are theme-neutral — work with default, forest, dark, and base themes
• Existing diagrams without these config keys render identically to today (0 breaking changes)

---