hcp-chart-svg-v2

star 0

Render deterministic SVG from HCP-DSL text according to HCPCHARTSPEC. Use when turning algorithm or software design requirements into proper HCP chart notation (module, repeat, fork, branch/true/false, return, ec/ex, data/in/out) instead of plain flowcharts.

gomurin0428 By gomurin0428 schedule Updated 3/7/2026

name: hcp-chart-svg-v2 description: Render deterministic SVG from HCP-DSL text according to HCPCHARTSPEC. Use when turning algorithm or software design requirements into proper HCP chart notation (module, repeat, fork, branch/true/false, return, ec/ex, data/in/out) instead of plain flowcharts.

HCP Chart SVG

Render HCPCHARTSPEC-compliant SVG from HCP-DSL text.

Workflow

  1. Read references/hcpchartspec.md for the full spec.
  2. Build request JSON with source (see references/sample-request.json).
  3. Run the renderer script.
  4. If diagnostics contains error, fix DSL and rerun.

Command

python scripts/hcp_render_svg.py --input ./request.json --output ./response.json --pretty

Request Rules

  • Input must be a JSON object.
  • Required key: source.
  • Do not set module when renderAllModules=true.
  • options accepts only keys defined in HCPCHARTSPEC.

Writing Style (Mandatory: Goal -> Detail)

  • Write HCP text so that the left side always expresses the main objective, and each deeper indent on the right expresses the means/details to achieve that objective.
  • Write level-0 labels as purpose/overview in natural Japanese. Do not place assignment, comparison, or other low-level operation lines directly at level 0.
  • Place conditions, calculations, assignments, data updates, and API/function call details one or more levels deeper under the corresponding purpose node.
  • If a line looks code-like at level 0, rewrite it as a purpose label and move the code-like detail to child lines before rendering.
  • Treat this as an authoring rule to follow in every chart definition.
  • Do not rely on mechanical lint-like checks for this rule; enforce it through writing guidance and review.

Example (Sieve of Eratosthenes style):

\module main
素数候補表を準備する
    0 と 1 を候補から外す
    2 以上を候補として登録する
\repeat 基準値の二乗が上限以下の間に候補を絞る
    \fork 基準値 p は候補として残っているか
        \true はい
            p の倍数を候補から外す
                \repeat 対象が上限以内の間
                    対象値を合成数として外す
                    次の倍数へ進める
        \false いいえ
            倍数処理を省略する
候補表から素数一覧を作る
    候補に残った値を順に集める
結果を利用者に渡す

Notes on Correctness

  • \branch / \true / \false must be direct children of a \fork (one indent deeper). This matches the standard HCP notation and avoids ambiguous charts.
  • Vertical trunk lines are rendered scope-aware: a trunk at depth D will not pass through rows whose rendered depth is < D. This prevents incorrect connections across top-level boundaries or between different branch bodies.
  • Branch rows are arrows (no symbol on the trunk), so the trunk remains continuous at their y-position.

Response Rules

  • Single-module rendering returns svg.
  • All-module rendering returns svgs.
  • If at least one error diagnostic exists, return empty svg payload.

Resources

  • references/hcpchartspec.md: full HCPCHARTSPEC text.
  • references/hcp-chart-schema.md: quick reference.
  • references/sample-request.json: runnable request sample.
  • references/sample-response.json: output sample.
  • scripts/hcp_render_svg.py: DSL to SVG renderer.
Install via CLI
npx skills add https://github.com/gomurin0428/MakingHCPChartSkill --skill hcp-chart-svg-v2
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator