@diagrammo/dgmo 0.8.4 → 0.8.6

package/src/cli.ts

@@ -48,9 +48,9 @@ const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
   org: 'Org chart — hierarchical tree structures',
   kanban: 'Kanban board — task/workflow columns',
   c4: 'C4 diagram — system architecture (context, container, component, deployment)',
-  'initiative-status':
-    'Initiative status — project roadmap with dependency tracking',
   infra: 'Infra chart — infrastructure traffic flow with rps computation',
+  'boxes-and-lines':
+    'Boxes and lines — general-purpose node-edge diagrams with groups and tags',
 };
 
 const CLAUDE_SKILL_CONTENT = `# dgmo — Diagrammo Diagram Assistant
@@ -192,9 +192,10 @@ Key options:
 | \`org\` | Hierarchical tree structures |
 | \`kanban\` | Task / workflow columns |
 | \`c4\` | System architecture (context → container → component → deployment) |
-| \`initiative-status\` | Project roadmap with dependency tracking |
 | \`sitemap\` | Website / app navigation structure |
 | \`infra\` | Infrastructure traffic flow with rps computation |
+| \`gantt\` | Project scheduling with dependencies |
+| \`boxes-and-lines\` | General-purpose node-edge diagrams with groups and tags |
 
 ## Key Syntax Patterns
 
@@ -452,9 +453,9 @@ API
   latency-ms: 45
 \`\`\`
 
-## All 32 chart types
+## All 31 chart types
 
-bar, line, multi-line, area, pie, doughnut, radar, polar-area, bar-stacked, scatter, sankey, chord, function, heatmap, funnel, slope, wordcloud, arc, timeline, venn, quadrant, sequence, flowchart, state, class, er, org, kanban, c4, initiative-status, sitemap, infra
+bar, line, multi-line, area, pie, doughnut, radar, polar-area, bar-stacked, scatter, sankey, chord, function, heatmap, funnel, slope, wordcloud, arc, timeline, venn, quadrant, sequence, flowchart, state, class, er, org, kanban, c4, sitemap, infra
 
 ## Common patterns
 
@@ -486,6 +487,7 @@ Full reference: call \`get_language_reference\` MCP tool or visit diagrammo.app/
 function printHelp(): void {
   console.log(`Usage: dgmo <input> [options]
        cat input.dgmo | dgmo [options]
+       dgmo cat <file>     Display file with syntax highlighting
 
 Render a .dgmo file to PNG (default) or SVG.
 
@@ -534,6 +536,8 @@ function parseArgs(argv: string[]): {
   copy: boolean;
   json: boolean;
   chartTypes: boolean;
+  cat: boolean;
+  noColor: boolean;
   installClaudeSkill: boolean;
   installClaudeCodeIntegration: boolean;
   installCodexIntegration: boolean;
@@ -553,6 +557,8 @@ function parseArgs(argv: string[]): {
     copy: false,
     json: false,
     chartTypes: false,
+    cat: false,
+    noColor: false,
     installClaudeSkill: false,
     installClaudeCodeIntegration: false,
     installCodexIntegration: false,
@@ -572,7 +578,13 @@ function parseArgs(argv: string[]): {
   while (i < args.length) {
     const arg = args[i];
 
-    if (arg === '--help' || arg === '-h') {
+    if (arg === 'cat' && !result.cat && !result.input) {
+      result.cat = true;
+      i++;
+    } else if (arg === '--no-color') {
+      result.noColor = true;
+      i++;
+    } else if (arg === '--help' || arg === '-h') {
       result.help = true;
       i++;
     } else if (arg === '--version' || arg === '-v') {
@@ -746,6 +758,37 @@ async function main(): Promise<void> {
     return;
   }
 
+  if (opts.cat) {
+    const useColor =
+      !opts.noColor && !process.env.NO_COLOR && process.stdout.isTTY === true;
+
+    let catContent: string;
+    if (opts.input && opts.input !== '-') {
+      const inputPath = resolve(opts.input);
+      try {
+        catContent = readFileSync(inputPath, 'utf-8');
+      } catch {
+        console.error(`Error: Cannot read file "${inputPath}"`);
+        process.exit(1);
+      }
+    } else {
+      // Read from stdin
+      try {
+        catContent = readFileSync(0, 'utf-8');
+      } catch {
+        console.error('Error: No input file specified');
+        console.error('Usage: dgmo cat <file>');
+        process.exit(1);
+      }
+    }
+
+    const { highlightDgmo, renderAnsi } =
+      await import('./editor/highlight-api');
+    const tokens = highlightDgmo(catContent);
+    process.stdout.write(renderAnsi(tokens, useColor));
+    return;
+  }
+
   if (opts.installClaudeCodeIntegration) {
     const claudeDir = join(homedir(), '.claude');
     if (!existsSync(claudeDir)) {

package/src/completion.ts

@@ -273,7 +273,6 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
     }),
   ],
   ['c4', withGlobals()],
-  ['initiative-status', withGlobals()],
   [
     'state',
     withGlobals({
@@ -313,6 +312,14 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       dependencies: { description: 'Show dependencies' },
     }),
   ],
+  [
+    'boxes-and-lines',
+    withGlobals({
+      direction: { description: 'Layout direction', values: ['LR', 'TB'] },
+      'active-tag': { description: 'Active tag group name' },
+      hide: { description: 'Hide tag:value pairs' },
+    }),
+  ],
 ]);
 
 // ============================================================
@@ -351,11 +358,11 @@ const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
   org: 'Organization chart',
   kanban: 'Kanban board',
   c4: 'C4 architecture diagram',
-  'initiative-status': 'Initiative status diagram',
   state: 'State diagram',
   sitemap: 'Sitemap diagram',
   infra: 'Infrastructure diagram',
   gantt: 'Gantt chart',
+  'boxes-and-lines': 'Boxes and lines diagram',
 };
 
 /** All chart types with descriptions, for chart type autocomplete. Excludes `multi-line` alias. */
@@ -481,28 +488,12 @@ export const PIPE_METADATA = new Map<
     },
   ],
   [
-    'initiative-status',
+    'boxes-and-lines',
     {
       node: {
-        done: { description: 'Completed' },
-        doing: { description: 'In progress' },
-        todo: { description: 'Not started' },
-        blocked: { description: 'Blocked' },
-        na: { description: 'Not applicable' },
-        wip: { description: 'Work in progress (alias for doing)' },
-        paused: { description: 'Paused (alias for blocked)' },
-        waiting: { description: 'Waiting (alias for blocked)' },
-      },
-      edge: {
-        done: { description: 'Completed' },
-        doing: { description: 'In progress' },
-        todo: { description: 'Not started' },
-        blocked: { description: 'Blocked' },
-        na: { description: 'Not applicable' },
-        wip: { description: 'Work in progress (alias for doing)' },
-        paused: { description: 'Paused (alias for blocked)' },
-        waiting: { description: 'Waiting (alias for blocked)' },
+        description: { description: 'Node description text' },
       },
+      edge: {},
     },
   ],
 ]);
@@ -935,12 +926,12 @@ function extractGanttSymbols(docText: string): DiagramSymbols {
 }
 
 // ============================================================
-// Initiative-status extractor
+// Boxes-and-lines extractor
 // ============================================================
 
-const IS_ARROW_RE = /^(\S+)\s+(?:-.*)?->\s+(\S+)/;
+const BL_ARROW_RE = /^(\S+)\s+(?:-.*)?(?:->|<->)\s+(\S+)/;
 
-function extractInitiativeStatusSymbols(docText: string): DiagramSymbols {
+function extractBoxesAndLinesSymbols(docText: string): DiagramSymbols {
   const lines = docText.split('\n');
   const entities: string[] = [];
   let pastFirstLine = false;
@@ -968,8 +959,11 @@ function extractInitiativeStatusSymbols(docText: string): DiagramSymbols {
       inTagBlock = false;
     }
 
-    // Edge lines: Source -> Target or Source -label-> Target
-    const arrowMatch = trimmed.match(IS_ARROW_RE);
+    // Skip groups
+    if (/^\[.+?\]/.test(trimmed)) continue;
+
+    // Edge lines
+    const arrowMatch = trimmed.match(BL_ARROW_RE);
     if (arrowMatch) {
       const src = arrowMatch[1].split('|')[0].trim();
       const dst = arrowMatch[2].split('|')[0].trim();
@@ -978,14 +972,12 @@ function extractInitiativeStatusSymbols(docText: string): DiagramSymbols {
       continue;
     }
 
-    // Node lines: Label | status or just Label (at root indent)
-    if (indent === 0) {
-      const label = trimmed.split('|')[0].trim();
-      if (label && !entities.includes(label)) entities.push(label);
-    }
+    // Node lines
+    const label = trimmed.split('|')[0].split('[')[0].trim();
+    if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'initiative-status', entities, keywords: [] };
+  return { kind: 'boxes-and-lines', entities, keywords: [] };
 }
 
 // ============================================================
@@ -1001,4 +993,4 @@ registerExtractor('state', extractStateSymbols);
 registerExtractor('sitemap', extractSitemapSymbols);
 registerExtractor('c4', extractC4Symbols);
 registerExtractor('gantt', extractGanttSymbols);
-registerExtractor('initiative-status', extractInitiativeStatusSymbols);
+registerExtractor('boxes-and-lines', extractBoxesAndLinesSymbols);

package/src/d3.ts

@@ -193,6 +193,7 @@ import {
   matchTagBlockHeading,
   validateTagValues,
   resolveTagColor,
+  stripDefaultModifier,
 } from './utils/tag-groups';
 import type { TagGroup } from './utils/tag-groups';
 import {
@@ -509,6 +510,7 @@ export function parseVisualization(
   let timelineEraBlockIndent = 0;
   let inTimelineMarkerBlock = false;
   let timelineMarkerBlockIndent = 0;
+  let inSlopePeriodBlock = false;
   const timelineAliasMap = new Map<string, string>();
   const VALID_D3_TYPES = new Set([
     'slope',
@@ -569,16 +571,16 @@ export function parseVisualization(
       }
     }
 
-    // Timeline tag group entries (indented under tag: heading)
+    // Timeline tag group entries (indented under tag heading)
     if (currentTimelineTagGroup && indent > 0) {
-      const trimmedEntry = line;
-      const isDefault = /\bdefault\s*$/.test(trimmedEntry);
-      const entryText = isDefault
-        ? trimmedEntry.replace(/\s+default\s*$/, '').trim()
-        : trimmedEntry;
+      const { text: entryText, isDefault } = stripDefaultModifier(line);
       const { label, color } = extractColor(entryText, palette);
       if (color) {
-        if (isDefault) currentTimelineTagGroup.defaultValue = label;
+        if (isDefault) {
+          currentTimelineTagGroup.defaultValue = label;
+        } else if (currentTimelineTagGroup.entries.length === 0) {
+          currentTimelineTagGroup.defaultValue = label;
+        }
         currentTimelineTagGroup.entries.push({
           value: label,
           color,
@@ -1013,9 +1015,9 @@ export function parseVisualization(
         continue;
       }
 
-      // Data points: Label x, y
+      // Data points: Label x, y  OR  Label x y
       const pointMatch = line.match(
-        /^(.+?)\s+([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/
+        /^(.+?)\s+([0-9]*\.?[0-9]+)\s*[,\s]\s*([0-9]*\.?[0-9]+)\s*$/
       );
       if (pointMatch) {
         const label = pointMatch[1].trim();
@@ -1099,6 +1101,164 @@ export function parseVisualization(
       }
     }
 
+    // ── Slope chart: period directive + right-scan data rows ──
+    if (result.type === 'slope') {
+      // Period block: indented lines inside `period` block
+      // (blank lines are pre-filtered at loop top, so only non-indented lines close the block)
+      if (inSlopePeriodBlock) {
+        if (indent > 0) {
+          result.periods.push(line);
+          continue;
+        }
+        // Non-indented line → close block, fall through to process normally
+        inSlopePeriodBlock = false;
+      }
+
+      // Period directive: `period Label1 Label2` or bare `period` (block open)
+      // Only accept before data rows start (F4: prevent keyword shadowing labels)
+      if (result.data.length === 0) {
+        const periodMatch = line.match(/^period\b(.*)$/i);
+        if (periodMatch) {
+          if (result.periods.length > 0 && !inSlopePeriodBlock) {
+            // F5: warn on duplicate period directives
+            warn(
+              lineNumber,
+              `Duplicate 'period' directive — periods are already defined`
+            );
+          }
+          const rest = periodMatch[1].trim();
+          if (rest) {
+            // One-line: `period 1715 1725`
+            const periodLabels = rest.split(/\s+/);
+            result.periods.push(...periodLabels);
+          } else {
+            // Block open: bare `period`
+            inSlopePeriodBlock = true;
+          }
+          continue;
+        }
+      }
+
+      // Migration error: bare period line (old syntax — comma-separated, no keyword)
+      // F1: Only fire when ALL comma-separated tokens are short (≤20 chars) and non-empty
+      if (
+        result.periods.length === 0 &&
+        line.includes(',') &&
+        !line.includes(':')
+      ) {
+        const tokens = line
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean);
+        const looksLikePeriods =
+          tokens.length >= 2 && tokens.every((t) => t.length <= 20);
+        if (looksLikePeriods) {
+          return fail(
+            lineNumber,
+            `Period lines require the 'period' keyword — use 'period ${tokens.join(' ')}'`
+          );
+        }
+      }
+
+      // Migration error: old colon syntax in data rows
+      // F2: Only fire when content after colon is predominantly numeric (old "Label: val1, val2" pattern)
+      if (line.includes(':')) {
+        const colonPos = line.indexOf(':');
+        const afterColon = line.substring(colonPos + 1).trim();
+        const numericTokens = afterColon
+          .split(/[,\s]+/)
+          .filter((v) => /^-?\d/.test(v));
+        // Only trigger if most tokens after the colon are numeric (old data pattern)
+        if (numericTokens.length >= 1) {
+          const allTokens = afterColon.split(/[,\s]+/).filter(Boolean);
+          if (numericTokens.length >= allTokens.length * 0.5) {
+            const label = line.substring(0, colonPos).trim();
+            return fail(
+              lineNumber,
+              `Colons are no longer used in slope data rows — use '${label} ${numericTokens.join(' ')}'`
+            );
+          }
+        }
+      }
+
+      // Right-scan data row parsing (requires periods to be known)
+      if (result.periods.length >= 2) {
+        const P = result.periods.length;
+        const tokens = line.split(/\s+/);
+        const values: number[] = [];
+
+        // Scan from right, capped at P values
+        let rightIdx = tokens.length - 1;
+        while (rightIdx >= 0 && values.length < P) {
+          const raw = tokens[rightIdx].replace(/,/g, '');
+          const num = parseFloat(raw);
+          if (!isNaN(num) && /^-?\d/.test(raw)) {
+            values.unshift(num);
+            rightIdx--;
+          } else {
+            break;
+          }
+        }
+
+        if (values.length < P) {
+          warn(
+            lineNumber,
+            `Data row has ${values.length} numeric value(s) but ${P} period(s) are defined — expected ${P} values`
+          );
+          continue;
+        }
+
+        // Remaining left tokens = label
+        const labelTokens = tokens.slice(0, rightIdx + 1);
+        const joinedLabel = labelTokens.join(' ');
+
+        if (!joinedLabel) {
+          warn(
+            lineNumber,
+            `Data row has no label — add a label before the numeric values`
+          );
+          continue;
+        }
+
+        // Color annotation: `Label (color)` → extract color
+        const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
+        const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
+        const colorPart = colorMatch
+          ? resolveColor(colorMatch[2].trim(), palette)
+          : null;
+
+        if (!labelPart) {
+          warn(
+            lineNumber,
+            `Data row has no label — add a label before the numeric values`
+          );
+          continue;
+        }
+
+        // F3: Warn on purely numeric labels — likely a mistake
+        if (/^\d[\d,.]*$/.test(labelPart)) {
+          warn(
+            lineNumber,
+            `Label '${labelPart}' looks numeric — this may indicate too many values or a missing label`
+          );
+        }
+
+        result.data.push({
+          label: labelPart,
+          values,
+          color: colorPart,
+          lineNumber,
+        });
+        continue;
+      }
+
+      // If we get here in a slope chart, it's an unrecognized line
+      if (firstLineParsed) {
+        warn(lineNumber, `Unexpected line: '${line}'.`);
+      }
+      continue;
+    }
+
     // ── Colon-separated metadata / options (legacy + data lines) ──
     const colonIndex = line.indexOf(':');
 
@@ -1222,23 +1382,6 @@ export function parseVisualization(
       continue;
     }
 
-    // Period line: comma-separated labels with no colon before first comma
-    // e.g., "2020, 2024" or "Q1 2023, Q2 2023, Q3 2023"
-    if (
-      result.periods.length === 0 &&
-      line.includes(',') &&
-      !line.includes(':')
-    ) {
-      const periods = line
-        .split(',')
-        .map((p) => p.trim())
-        .filter(Boolean);
-      if (periods.length >= 2) {
-        result.periods = periods;
-        continue;
-      }
-    }
-
     // Catch-all: nothing matched this line
     // Skip on first line — chart type suggestion is handled post-loop
     if (firstLineParsed) {
@@ -1408,14 +1551,14 @@ export function parseVisualization(
   if (result.periods.length < 2) {
     return fail(
       1,
-      'Missing or invalid periods line. Provide at least 2 comma-separated period labels (e.g., "2020, 2024")'
+      "Missing 'period' directive. Add 'period 2020 2024' before data rows (minimum 2 periods required)"
     );
   }
 
   if (result.data.length === 0) {
     warn(
       1,
-      'No data lines found. Add data as "Label: value1, value2" (e.g., "Apple: 25, 35")'
+      "No data lines found. Add data as 'Label value1 value2' (e.g., 'Blackbeard 40 4')"
     );
   }
 
@@ -4905,8 +5048,8 @@ export function renderTimeline(
           }
 
           const pillXOff = isActive ? LG_CAPSULE_PAD : 0;
-          const pillYOff = isActive ? LG_CAPSULE_PAD : 0;
-          const pillH = LG_HEIGHT - (isActive ? LG_CAPSULE_PAD * 2 : 0);
+          const pillYOff = LG_CAPSULE_PAD;
+          const pillH = LG_HEIGHT - LG_CAPSULE_PAD * 2;
 
           // Pill background
           gEl
@@ -6714,29 +6857,27 @@ export async function renderForExport(
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
-  if (detectedType === 'initiative-status') {
-    const { parseInitiativeStatus } =
-      await import('./initiative-status/parser');
-    const { layoutInitiativeStatus } =
-      await import('./initiative-status/layout');
-    const { renderInitiativeStatus } =
-      await import('./initiative-status/renderer');
+  if (detectedType === 'boxes-and-lines') {
+    const { parseBoxesAndLines } = await import('./boxes-and-lines/parser');
+    const { layoutBoxesAndLines } = await import('./boxes-and-lines/layout');
+    const { renderBoxesAndLinesForExport } =
+      await import('./boxes-and-lines/renderer');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
-    const isParsed = parseInitiativeStatus(content);
-    if (isParsed.error || isParsed.nodes.length === 0) return '';
+    const blParsed = parseBoxesAndLines(content);
+    if (blParsed.error || blParsed.nodes.length === 0) return '';
 
-    const isLayout = layoutInitiativeStatus(isParsed);
+    const blLayout = layoutBoxesAndLines(blParsed);
     const PADDING = 20;
-    const titleOffset = isParsed.title ? 40 : 0;
-    const exportWidth = isLayout.width + PADDING * 2;
-    const exportHeight = isLayout.height + PADDING * 2 + titleOffset;
+    const titleOffset = blParsed.title ? 40 : 0;
+    const exportWidth = blLayout.width + PADDING * 2;
+    const exportHeight = blLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderInitiativeStatus(
+    renderBoxesAndLinesForExport(
       container,
-      isParsed,
-      isLayout,
+      blParsed,
+      blLayout,
       effectivePalette,
       theme === 'dark',
       { exportDims: { width: exportWidth, height: exportHeight } }

package/src/dgmo-router.ts

@@ -13,13 +13,10 @@ import { parseVisualization } from './d3';
 import { parseOrg, looksLikeOrg } from './org/parser';
 import { parseKanban } from './kanban/parser';
 import { parseC4 } from './c4/parser';
-import {
-  looksLikeInitiativeStatus,
-  parseInitiativeStatus,
-} from './initiative-status/parser';
 import { looksLikeSitemap, parseSitemap } from './sitemap/parser';
 import { parseInfra } from './infra/parser';
 import { parseGantt } from './gantt/parser';
+import { parseBoxesAndLines } from './boxes-and-lines/parser';
 import { parseFirstLine } from './utils/parsing';
 import type { DgmoError } from './diagnostics';
 
@@ -97,7 +94,6 @@ export function parseDgmoChartType(content: string): string | null {
   if (looksLikeFlowchart(content)) return 'flowchart';
   if (looksLikeClassDiagram(content)) return 'class';
   if (looksLikeERDiagram(content)) return 'er';
-  if (looksLikeInitiativeStatus(content)) return 'initiative-status';
   if (looksLikeState(content)) return 'state';
   if (looksLikeSitemap(content)) return 'sitemap';
   if (looksLikeOrg(content)) return 'org';
@@ -147,11 +143,11 @@ const DIAGRAM_TYPES = new Set([
   'org',
   'kanban',
   'c4',
-  'initiative-status',
   'state',
   'sitemap',
   'infra',
   'gantt',
+  'boxes-and-lines',
 ]);
 const EXTENDED_CHART_TYPES = new Set([
   'scatter',
@@ -226,11 +222,11 @@ const PARSE_DISPATCH = new Map<
   ['org', (c) => parseOrg(c)],
   ['kanban', (c) => parseKanban(c)],
   ['c4', (c) => parseC4(c)],
-  ['initiative-status', (c) => parseInitiativeStatus(c)],
   ['state', (c) => parseState(c)],
   ['sitemap', (c) => parseSitemap(c)],
   ['infra', (c) => parseInfra(c)],
   ['gantt', (c) => parseGantt(c)],
+  ['boxes-and-lines', (c) => parseBoxesAndLines(c)],
 ]);
 
 /**

package/src/echarts.ts

@@ -2632,6 +2632,33 @@ function segmentLabelFormatter(parsed: ParsedChart): string {
 
 // ── Pie / Doughnut ───────────────────────────────────────────
 
+/**
+ * Compute pie label config: shrink radius and font when labels are long
+ * so nothing gets truncated or wrapped.
+ */
+function pieLabelLayout(parsed: ParsedChart): {
+  outerRadius: number;
+  fontSize: number;
+} {
+  const formatter = segmentLabelFormatter(parsed);
+  const total = parsed.data.reduce((s, d) => s + d.value, 0);
+  const maxLen = parsed.data.reduce((mx, d) => {
+    const label = formatter
+      .replace('{b}', d.label)
+      .replace('{c}', String(d.value))
+      .replace('{d}', total > 0 ? ((d.value / total) * 100).toFixed(2) : '0');
+    return Math.max(mx, label.length);
+  }, 0);
+
+  // Shrink radius and font for longer labels so they fit without truncation.
+  // The chart renders in containers of varying width (800px in-app to 1200px CLI),
+  // so we need enough margin for labels at the smallest reasonable container.
+  if (maxLen > 30) return { outerRadius: 38, fontSize: 11 };
+  if (maxLen > 24) return { outerRadius: 45, fontSize: 12 };
+  if (maxLen > 18) return { outerRadius: 55, fontSize: 13 };
+  return { outerRadius: 70, fontSize: 14 };
+}
+
 function buildPieOption(
   parsed: ParsedChart,
   textColor: string,
@@ -2655,6 +2682,8 @@ function buildPieOption(
     };
   });
 
+  const { outerRadius, fontSize } = pieLabelLayout(parsed);
+
   return {
     ...CHART_BASE,
     ...HIDE_AXES,
@@ -2666,13 +2695,16 @@ function buildPieOption(
     series: [
       {
         type: 'pie',
-        radius: isDoughnut ? ['40%', '70%'] : ['0%', '70%'],
+        radius: isDoughnut
+          ? [`${Math.round(outerRadius * 0.57)}%`, `${outerRadius}%`]
+          : ['0%', `${outerRadius}%`],
         data,
         label: {
           position: 'outside',
           formatter: segmentLabelFormatter(parsed),
           color: textColor,
           fontFamily: FONT_FAMILY,
+          fontSize,
         },
         labelLine: { show: true },
         emphasis: EMPHASIS_SELF,
@@ -2790,13 +2822,17 @@ function buildPolarAreaOption(
       {
         type: 'pie',
         roseType: 'radius',
-        radius: ['10%', '70%'],
+        radius: (() => {
+          const { outerRadius } = pieLabelLayout(parsed);
+          return [`${Math.round(outerRadius * 0.14)}%`, `${outerRadius}%`];
+        })(),
         data,
         label: {
           position: 'outside',
           formatter: segmentLabelFormatter(parsed),
           color: textColor,
           fontFamily: FONT_FAMILY,
+          fontSize: pieLabelLayout(parsed).fontSize,
         },
         labelLine: { show: true },
         emphasis: EMPHASIS_SELF,