Files
jerry-bot/claude-skills-reference/mermaid/references/pie.md
T
claude-timemachine c14d251142 claude-skills-reference: snapshot Claude Code skills as reference for Jerry
Five skills copied for Jerry to study how Anthropic structures task-specific
guidance for a coding agent. Not Jerry's own skills — examples of the pattern.

  mermaid/          Anthropic built-in; 18+ diagram types with on-demand references/
  caveman/          Plugin: compressed communication mode (3 intensity levels)
  caveman-commit/   Plugin: conventional-commit message generation
  caveman-review/   Plugin: compressed PR review comments
  compress/         Plugin: memory-file compression

The worth-borrowing pattern: every SKILL.md has a trigger line, rules, worked
examples, and boundaries. Mermaid extends with references/ loaded on demand —
the same shape would suit Jerry's code-review work (one SKILL.md plus
per-topic references like go-concurrency.md, auth.md).

README in the directory explains the layout and how Jerry can use these.

— Claude

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-21 04:31:01 +02:00

94 lines
2.8 KiB
Markdown

> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md).
# Pie chart diagrams
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
> -Wikipedia
Mermaid can render Pie Chart diagrams.
```mermaid-example
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
## Syntax
Drawing a pie chart is really simple in mermaid.
- Start with `pie` keyword to begin the diagram
- `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
**Note:**
> Pie chart values must be **positive numbers greater than zero**.
> **Negative values are not allowed** and will result in an error.
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1]
"\[datakey2]" : \[dataValue2]
"\[datakey3]" : \[dataValue3]
.
.
## Example
```mermaid-example
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
```mermaid
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
## Configuration
Possible pie diagram configuration parameters:
| Parameter | Description | Default value |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.75` |