legalrel

法律の当事者関係図（人→人へ債権/担保の矢印）を、独自DSLからSVG文字列として生成するローカル完結パッケージです。

特長

• Mermaid風のDSL（1行1命令、コメントは # 以降）
• DOM非依存のコア（parseLegalRel / renderLegalRelToSvg）
• Web Component も同梱（legalrel/element）

インストール

npm install legalrel

DSL例

chart "当事者関係図"
node A "A（債権者・抵当権者）" x=60 y=80 w=140 h=120 shape=round r=16 frame=2 frameColor="#1f77b4"
node B "B（債務者）" x=340 y=80 w=140 h=120 shape=round r=16 frame=2 frameColor="#c0392b"
node C "C（物上保証人）" x=200 y=260 w=160 h=120 shape=rect frame=2 frameColor="#2c3e50"
edge E1 type=single from=A to=B label="被担保債権" dashed=0
edge E2 type=wavy from=A to=C label="抵当権（C財産）" dashed=0 color="#d35400"

Core API

import { parseLegalRel, renderLegalRelToSvg } from "legalrel";

const ast = parseLegalRel(dsl);
const svg = renderLegalRelToSvg(ast);

Web Component

<legal-rel>
  chart "当事者関係図"
  node A "A" x=20 y=20 w=120 h=120
  node B "B" x=220 y=20 w=120 h=120
  edge E1 type=single from=A to=B label="債権"
</legal-rel>
<script type="module">
  import "legalrel/element";
</script>

src 属性を指定すると外部DSLを読み込みます。

<legal-rel src="/sample.legalrel"></legal-rel>

Next.js (OpenNext) 例

"use client";

import { parseLegalRel, renderLegalRelToSvg } from "legalrel";

const dsl = `chart "当事者関係図"
node A "A（債権者）" x=40 y=60 w=120 h=120
node B "B（債務者）" x=260 y=60 w=120 h=120
edge E1 type=single from=A to=B label="被担保債権"`;

export default function LegalRelExample() {
  const svg = renderLegalRelToSvg(parseLegalRel(dsl));
  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

ビルド / デモ

npm run build
npm run demo:serve

ブラウザで http://localhost:8080/demo/index.html を開きます。