ts-graphviz 1.2.4-dev.ebf0c074c → 1.3.1-dev.e5c510529

package/README.md

@@ -6,6 +6,7 @@
 [![code style: prettier](https://img.shields.io/badge/code%20style-prettier-ff69b4?logo=prettier&style=flat)](https://github.com/facebook/jest)
 [![test: jest](https://img.shields.io/badge/tested%20with-jest-99424f?logo=jest&style=flat)](https://github.com/facebook/jest)
 ![node version](https://img.shields.io/node/v/ts-graphviz)
+[![deno version](https://img.shields.io/badge/deno-^1.28.0-black?logo=deno)](https://github.com/denoland/deno)
 ![npm](https://img.shields.io/npm/dm/ts-graphviz)
 [![All Contributors](https://img.shields.io/github/all-contributors/ts-graphviz/ts-graphviz?color=orange)](#contributors)
 
@@ -19,7 +20,7 @@
 [![Refarence](https://img.shields.io/badge/-Refarence-3178C6?logo=TypeScript&style=flat&logoColor=fff)](https://ts-graphviz.github.io/ts-graphviz/)
 [![Suponser](https://img.shields.io/badge/-Suponser-fff?logo=GitHub%20Sponsors&style=flat)](https://github.com/sponsors/kamiazya)
 
-> [English](https://github.com/ts-graphviz/ts-graphviz/blob/main/README.md) | [日本語](https://github.com/ts-graphviz/ts-graphviz/blob/main/README.ja.md)
+> [English](https://github.com/ts-graphviz/ts-graphviz/blob/main/README.md) | [日本語](https://github.com/ts-graphviz/ts-graphviz/blob/main/README_ja.md)
 
 ## Key Features ✨
 
@@ -34,6 +35,8 @@
 
 ## Installation 💽
 
+### Node.js
+
 This package can then be installed using a package manager.
 
 ```bash
@@ -45,6 +48,16 @@ $ yarn add ts-graphviz
 $ pnpm add ts-graphviz
 ```
 
+### Deno 🦕
+
+[Deno v1.28 and above supports npm](https://deno.land/manual/node/npm_specifiers).
+
+You can install and use the package by specifying the following:
+
+```ts
+import { toDot } from 'npm:ts-graphviz';
+```
+
 ## Usage 📑
 
 This section provides an overview of the package.
@@ -322,6 +335,56 @@ const dot = toDot(g);
 
 </details>
 
+### `ts-graphviz/adapter` Module 🔌
+
+> This module status is ![beta](https://img.shields.io/badge/-beta-orange).
+
+
+Provides an interface to run Graphviz dot commands.
+
+[Graphviz](https://graphviz.gitlab.io/) must be installed so that the dot command can be executed.
+
+Execute the dot command to output a DOT language string to a stream or file.
+
+![Adapter State Machine](./media/adapter-state-machine.svg)
+
+This module provides the following functions.
+
+- The `toStream` function converts **DOT** to **Stream**.
+    ```ts
+    import { toStream } from 'ts-graphviz/adapter';
+
+    const dot = `
+      digraph example {
+        node1 [
+          label = "My Node",
+        ]
+      }
+    `;
+
+    const stream = await toStream(dot, { format: 'svg' });
+    // Node.js
+    stream.pipe(process.stdout);
+    // Deno
+    await stream.pipeTo(Deno.stdout.writable);
+    ```
+- Writes **DOT** to a file at the specified path `toFile` function
+    ```ts
+    import { toFile } from 'ts-graphviz/adapter';
+
+    const dot = `
+      digraph example {
+        node1 [
+          label = "My Node",
+        ]
+      }
+    `;
+
+    await toFile(dot, './result.svg', { format: 'svg' });
+    ```
+
+> **Note** Designed to work with Node.js and Deno, Stream is runtime native.
+
 ### `ts-graphviz/ast` Module 🔢
 
 > This module status is ![beta](https://img.shields.io/badge/-beta-orange).
@@ -438,6 +501,17 @@ const ast = parse(`
 
 </details>
 
+## Who's using `ts-graphviz` 📜
+
+- [Apollo GraphQL](https://github.com/apollographql)
+- [AWS](https://github.com/aws)
+- [IBM (StrongLoop)](https://strongloop.com)
+- [The University of Tokyo](https://github.com/csg-tokyo)
+- [Transmute](https://github.com/transmute-industries)
+
+> **Note** Let us know that you're using `ts-graphviz` on [GitHub Discussions](https://github.com/ts-graphviz/ts-graphviz/discussions/736) 🙏
+
+
 ## Related Projects 💫
 
 Related projects can be found at [**ts-graphviz** GitHub Organization](https://github.com/ts-graphviz).
@@ -454,12 +528,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <table>
   <tbody>
     <tr>
-      <td align="center"><a href="http://blog.kamiazya.tech/"><img src="https://avatars0.githubusercontent.com/u/35218186?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yuki Yamazaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Tests">⚠️</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Documentation">📖</a> <a href="#ideas-kamiazya" title="Ideas, Planning, & Feedback">🤔</a></td>
-      <td align="center"><a href="https://laysent.com"><img src="https://avatars2.githubusercontent.com/u/1191606?v=4?s=100" width="100px;" alt=""/><br /><sub><b>LaySent</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3Alaysent" title="Bug reports">🐛</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=laysent" title="Tests">⚠️</a></td>
-      <td align="center"><a href="https://github.com/elasticdotventures"><img src="https://avatars0.githubusercontent.com/u/35611074?v=4?s=100" width="100px;" alt=""/><br /><sub><b>elasticdotventures</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=elasticdotventures" title="Documentation">📖</a></td>
-      <td align="center"><a href="https://github.com/ChristianMurphy"><img src="https://avatars.githubusercontent.com/u/3107513?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian Murphy</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=ChristianMurphy" title="Code">💻</a> <a href="#ideas-ChristianMurphy" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=ChristianMurphy" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://blog.kamiazya.tech/"><img src="https://avatars0.githubusercontent.com/u/35218186?v=4?s=100" width="100px;" alt="Yuki Yamazaki"/><br /><sub><b>Yuki Yamazaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Tests">⚠️</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Documentation">📖</a> <a href="#ideas-kamiazya" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://laysent.com"><img src="https://avatars2.githubusercontent.com/u/1191606?v=4?s=100" width="100px;" alt="LaySent"/><br /><sub><b>LaySent</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3Alaysent" title="Bug reports">🐛</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=laysent" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/elasticdotventures"><img src="https://avatars0.githubusercontent.com/u/35611074?v=4?s=100" width="100px;" alt="elasticdotventures"/><br /><sub><b>elasticdotventures</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=elasticdotventures" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ChristianMurphy"><img src="https://avatars.githubusercontent.com/u/3107513?v=4?s=100" width="100px;" alt="Christian Murphy"/><br /><sub><b>Christian Murphy</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=ChristianMurphy" title="Code">💻</a> <a href="#ideas-ChristianMurphy" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=ChristianMurphy" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ArtemAdamenko"><img src="https://avatars.githubusercontent.com/u/2178516?v=4?s=100" width="100px;" alt="Artem"/><br /><sub><b>Artem</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3AArtemAdamenko" title="Bug reports">🐛</a></td>
     </tr>
-  </tobdy>
+  </tbody>
 </table>
 
 <!-- markdownlint-restore -->

package/lib/adapter/deno/mod.d.ts

@@ -0,0 +1,17 @@
+export type Format = 'png' | 'svg' | 'json' | 'jpg' | 'pdf' | 'xdot' | 'plain' | 'dot_json';
+
+export interface Options {
+  format?: Format;
+  suppressWarnings?: boolean;
+  dotCommand?: string;
+}
+
+/**
+ * Execute the Graphviz dot command and make a Stream of the results.
+ */
+export function toStream(dot: string, options?: Options): Promise<ReadableStream>;
+
+/**
+ * Execute the Graphviz dot command and output the results to a file.
+ */
+export function toFile(dot: string, path: string, options?: Options): Promise<void>;

package/lib/adapter/deno/mod.js

@@ -0,0 +1,33 @@
+function commandBuilder({ dotCommand = 'dot', suppressWarnings = true, format = 'svg' } = {}) {
+  const args = [
+    ...(function* () {
+      if (suppressWarnings) yield '-q';
+      yield `-T${format}`;
+    })(),
+  ];
+  return [dotCommand, args];
+}
+
+/**
+ * Execute the Graphviz dot command and make a Stream of the results.
+ */
+export async function toStream(dot, options) {
+  const [command, args] = commandBuilder(options);
+  const cp = new Deno.Command(command, {
+    args: args,
+    stdin: 'piped',
+  }).spawn();
+  const stdin = cp.stdin.getWriter();
+  await stdin.write(new TextEncoder().encode(dot));
+  await stdin.close();
+  return cp.stdout;
+}
+
+/**
+ * Execute the Graphviz dot command and output the results to a file.
+ */
+export async function toFile(dot, path, options) {
+  const output = await Deno.open(path, { write: true });
+  const stream = await toStream(dot, options);
+  await stream.pipeTo(output.writable);
+}

package/lib/adapter/index.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var node_fs = require('node:fs');
+var node_stream = require('node:stream');
+var node_util = require('node:util');
+var node_child_process = require('node:child_process');
+
+/**
+ * @module ts-graphviz/adapter
+ * @beta
+ */
+function commandBuilder({ dotCommand = 'dot', suppressWarnings = true, format = 'svg' } = {}) {
+  const args = [
+    ...(function* () {
+      if (suppressWarnings) yield '-q';
+      yield `-T${format}`;
+    })(),
+  ];
+  return [dotCommand, args];
+}
+/**
+ * NOTE:
+ * The node:stream/promises standard module is not provided in Node 14.
+ * Fix Node 14 to use node:stream/promises after LTS ends.
+ */
+const pipeline = node_util.promisify(node_stream.pipeline);
+/**
+ * Execute the Graphviz dot command and make a Stream of the results.
+ */
+async function toStream(dot, options) {
+  const [command, args] = commandBuilder(options);
+  const p = node_child_process.spawn(command, args, { stdio: 'pipe' });
+  await pipeline(node_stream.Readable.from([dot]), p.stdin);
+  return p.stdout;
+}
+/**
+ * Execute the Graphviz dot command and output the results to a file.
+ */
+async function toFile(dot, path, options) {
+  const stream = await toStream(dot, options);
+  await pipeline(stream, node_fs.createWriteStream(path));
+}
+
+exports.toFile = toFile;
+exports.toStream = toStream;

package/lib/adapter/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="node" />
+declare type Format = 'png' | 'svg' | 'json' | 'jpg' | 'pdf' | 'xdot' | 'plain' | 'dot_json';
+interface Options {
+  format?: Format;
+  suppressWarnings?: boolean;
+  dotCommand?: string;
+}
+/**
+ * Execute the Graphviz dot command and make a Stream of the results.
+ */
+declare function toStream(dot: string, options?: Options): Promise<NodeJS.ReadableStream>;
+/**
+ * Execute the Graphviz dot command and output the results to a file.
+ */
+declare function toFile(dot: string, path: string, options?: Options): Promise<void>;
+
+export { Format, Options, toFile, toStream };

package/lib/adapter/index.js

@@ -0,0 +1,42 @@
+import { createWriteStream } from 'node:fs';
+import { pipeline as pipeline$1, Readable } from 'node:stream';
+import { promisify } from 'node:util';
+import { spawn } from 'node:child_process';
+
+/**
+ * @module ts-graphviz/adapter
+ * @beta
+ */
+function commandBuilder({ dotCommand = 'dot', suppressWarnings = true, format = 'svg' } = {}) {
+  const args = [
+    ...(function* () {
+      if (suppressWarnings) yield '-q';
+      yield `-T${format}`;
+    })(),
+  ];
+  return [dotCommand, args];
+}
+/**
+ * NOTE:
+ * The node:stream/promises standard module is not provided in Node 14.
+ * Fix Node 14 to use node:stream/promises after LTS ends.
+ */
+const pipeline = promisify(pipeline$1);
+/**
+ * Execute the Graphviz dot command and make a Stream of the results.
+ */
+async function toStream(dot, options) {
+  const [command, args] = commandBuilder(options);
+  const p = spawn(command, args, { stdio: 'pipe' });
+  await pipeline(Readable.from([dot]), p.stdin);
+  return p.stdout;
+}
+/**
+ * Execute the Graphviz dot command and output the results to a file.
+ */
+async function toFile(dot, path, options) {
+  const stream = await toStream(dot, options);
+  await pipeline(stream, createWriteStream(path));
+}
+
+export { toFile, toStream };

package/media/adapter-state-machine.svg

@@ -0,0 +1 @@
+<svg width="172pt" height="211pt" viewBox="0 0 172.44 211.09" xmlns="http://www.w3.org/2000/svg"><g class="graph" transform="translate(4 207.09)"><path fill="#fff" stroke="transparent" d="M-4 4v-211.09h172.44V4H-4z"/><g class="node"><circle fill="none" stroke="#000" cx="89.85" cy="-171.89" r="31.4"/><text text-anchor="middle" x="89.85" y="-168.19" font-family="Times,serif" font-size="14">DOT</text></g><g class="node"><circle fill="none" stroke="#000" cx="44.85" cy="-44.85" r="44.69"/><text text-anchor="middle" x="44.85" y="-41.15" font-family="Times,serif" font-size="14">Stream</text></g><g class="edge"><path fill="none" stroke="#000" d="M66.46-151.09c-7.72 7.95-15.4 17.76-19.61 28.4-2.87 7.24-4.54 15.17-5.4 23.11"/><path stroke="#000" d="m44.94-99.32-4.18 9.73-2.8-10.21 6.98.48z"/><text text-anchor="middle" x="80.35" y="-111.49" font-family="Times,serif" font-size="14">toStream</text></g><g class="node"><circle fill="none" stroke="#000" cx="135.85" cy="-44.85" r="28.7"/><text text-anchor="middle" x="135.85" y="-41.15" font-family="Times,serif" font-size="14">File</text></g><g class="edge"><path fill="none" stroke="#000" d="M104.32-144.01c3.38 6.84 6.79 14.26 9.53 21.32 4.95 12.76 9.35 27.09 12.89 39.89"/><path stroke="#000" d="m130.18-83.48-.79 10.56-5.97-8.75 6.76-1.81z"/><text text-anchor="middle" x="139.85" y="-111.49" font-family="Times,serif" font-size="14">toFile</text></g></g></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ts-graphviz",
-    "version": "1.2.4-dev.ebf0c074c",
+    "version": "1.3.1-dev.e5c510529",
     "author": "kamiazya <yuki@kamiazya.tech>",
     "description": "Graphviz library for TypeScript.",
     "homepage": "https://ts-graphviz.github.io/ts-graphviz/",
@@ -25,21 +25,46 @@
     "types": "lib/index.d.ts",
     "exports": {
         ".": {
-            "import": "./lib/index.js",
-            "require": "./lib/index.cjs",
-            "types": "./lib/index.d.ts"
+            "require": {
+                "default": "./lib/index.cjs",
+                "types": "./lib/index.d.ts"
+            },
+            "import": {
+                "default": "./lib/index.js",
+                "types": "./lib/index.d.ts"
+            }
         },
         "./ast": {
-            "import": "./lib/ast/index.js",
-            "require": "./lib/ast/index.cjs",
-            "types": "./lib/ast/index.d.ts"
-        }
+            "require": {
+                "default": "./lib/ast/index.cjs",
+                "types": "./lib/ast/index.d.ts"
+            },
+            "import": {
+                "default": "./lib/ast/index.js",
+                "types": "./lib/ast/index.d.ts"
+            }
+        },
+        "./adapter": {
+            "deno": {
+                "default": "./lib/adapter/deno/mod.js",
+                "types": "./lib/adapter/deno/mod.d.ts"
+            },
+            "node": {
+                "require": "./lib/adapter/index.cjs",
+                "import": "./lib/adapter/index.js",
+                "types": "./lib/adapter/index.d.ts"
+            }
+        },
+        "./package.json": "./package.json"
     },
-    "imports": {
-        "#lib/*": {
-            "import": "./lib/*/index.js",
-            "require": "./lib/*/index.cjs",
-            "types": "./lib/*/index.d.ts"
+    "typesVersions": {
+        "*": {
+            "ast": [
+                "lib/ast"
+            ],
+            "adapter": [
+                "lib/adapter"
+            ]
         }
     },
     "license": "MIT",
@@ -49,7 +74,9 @@
     "scripts": {
         "build:peggy": "peggy --plugin ts-pegjs --extra-options-file src/ast/dot-shim/parser/peggy.options.json -o src/ast/dot-shim/parser/_parse.ts src/ast/dot-shim/parser/dot.peggy",
         "prebuild": "yarn build:peggy",
-        "build": "tsc -p tsconfig.build.json && rollup -c",
+        "build:deno": "cp -r src/adapter/deno lib/adapter/deno",
+        "build:node": "tsc -p tsconfig.build.json && rollup -c",
+        "build": "yarn build:node && yarn build:deno",
         "postbuild": "prettier --write ./lib/**/index.{js,cjs,d.ts}",
         "pretest": "yarn build:peggy",
         "test": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest",

package/README.ja.md

@@ -1,498 +0,0 @@
-[![GitHub Action](https://github.com/kamiazya/ts-graphviz/workflows/NodeCI/badge.svg)](https://github.com/kamiazya/ts-graphviz/actions?workflow=NodeCI)
-[![npm version](https://badge.fury.io/js/ts-graphviz.svg)](https://badge.fury.io/js/ts-graphviz)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
-[![code style: prettier](https://img.shields.io/badge/code%20style-prettier-ff69b4?logo=prettier&style=flat)](https://github.com/facebook/jest)
-[![test: jest](https://img.shields.io/badge/tested%20with-jest-99424f?logo=jest&style=flat)](https://github.com/facebook/jest)
-![node version](https://img.shields.io/node/v/ts-graphviz)
-![npm](https://img.shields.io/npm/dm/ts-graphviz)
-[![All Contributors](https://img.shields.io/github/all-contributors/ts-graphviz/ts-graphviz?color=orange)](#contributors)
-
-# ts-graphviz
-
-TypeScriptの ための [Graphviz](https://graphviz.gitlab.io/) ライブラリ
-
-[![GitHub](https://img.shields.io/badge/-GitHub-181717?logo=GitHub&style=flat)](https://github.com/ts-graphviz/ts-graphviz)
-[![npm](https://img.shields.io/badge/-npm-CB3837?logo=npm&style=flat)](https://www.npmjs.com/package/ts-graphviz)
-[![yarn](https://img.shields.io/badge/-yarn-ffffff?logo=Yarn&style=flat)](https://yarnpkg.com/package/ts-graphviz)
-[![Refarence](https://img.shields.io/badge/-Refarence-3178C6?logo=TypeScript&style=flat&logoColor=fff)](https://ts-graphviz.github.io/ts-graphviz/)
-[![Suponser](https://img.shields.io/badge/-Suponser-fff?logo=GitHub%20Sponsors&style=flat)](https://github.com/sponsors/kamiazya)
-
-> [English](https://github.com/ts-graphviz/ts-graphviz/blob/main/README.md) | [日本語](https://github.com/ts-graphviz/ts-graphviz/blob/main/README.ja.md)
-
-## 主な機能 ✨
-
-TypeScript に完全に統合された Graphviz DOT言語のモデルとASTを提供します。
-
-- **TypeScript フレンドリーな API**
-  - DOT言語のモデルを提供しています。また属性と属性の型まで TypeScript の型定義が用意されています。
-- **パラダイムからの開放**
-  - オブジェクト指向で設計され、命令的 API と 宣言的 API のどちらにも適合できるAPI提供しています。 プロジェクトにあったパラダイムを選択できます。
-- **あらゆるユースケースに対応**
-  - モデルを提供する高レイヤーの API と ASTを取り扱う低レイヤーの API をどちらも提供し、あらゆるユースケースに対応します。
-
-## インストール方法 💽
-
-このパッケージは、パッケージマネージャを使用してインストールすることができます。
-
-```bash
-# npm
-$ npm install -S ts-graphviz
-# or yarn
-$ yarn add ts-graphviz
-# or pnpm
-$ pnpm add ts-graphviz
-```
-
-## 使い方 📑
-
-この項では、パッケージの概要について説明します。
-
-より詳細なAPIの仕様は、 TypeScript の型定義のコメントやそれを元に自動生成された [ドキュメント](https://ts-graphviz.github.io/ts-graphviz/) を参照してください。
-
-### `ts-graphviz` モジュール 🚩
-
-DOT 言語をJavaScript/TypeScriptで扱うためのインターフェースである Model を提供します。
-
-![ts-graphviz](./media/ts-graphviz.svg)
-
-#### オブジェクト指向 ❤️
-
-**Model** はオブジェクト指向に設計されており、 `Digraph`, `Graph`, `Subgraph`, `Node`, `Edge` のクラスを提供しています。
-
-**Model** を **DOT** (DOT言語の文字列)に変換する`toDot` 関数を提供しています。
-
-```typescript
-import { attribute as _, Digraph, Subgraph, Node, Edge, toDot } from 'ts-graphviz';
-
-const G = new Digraph();
-const A = new Subgraph('A');
-const node1 = new Node('node1', {
-  [_.color]: 'red'
-});
-const node2 = new Node('node2', {
-  [_.color]: 'blue'
-});
-const edge = new Edge([node1, node2], {
-  [_.label]: 'Edge Label',
-  [_.color]: 'pink'
-});
-G.addSubgraph(A);
-A.addNode(node1);
-A.addNode(node2);
-A.addEdge(edge);
-const dot = toDot(G);
-// digraph {
-//   subgraph "A" {
-//     "node1" [
-//       color = "red",
-//     ];
-//     "node2" [
-//       color = "blue",
-//     ];
-//     "node1" -> "node2" [
-//       label = "Edge Label",
-//       color = "pink",
-//     ];
-//   }
-// }
-```
-
-<details>
-<summary>高度な使い方</summary>
-
-##### カスタム・クラス 🤖
-
-クラスを継承することで独自の実装を加えることもできます。
-
-```typescript
-import { Digraph, Node, Edge, EdgeTargetTuple, attribute as _, toDot } from 'ts-graphviz';
-
-class MyCustomDigraph extends Digraph {
-  constructor() {
-    super('G', {
-      [_.label]: 'This is Custom Digraph',
-    });
-  }
-}
-class MyCustomNode extends Node {
-  constructor(id: string) {
-    super(`node_${id}`, {
-      [_.label]: `This is Custom Node ${id}`,
-    });
-  }
-}
-
-class MyCustomEdge extends Edge {
-  constructor(targets: EdgeTargetTuple) {
-    super(targets, {
-      [_.label]: 'This is Custom Edge',
-    });
-  }
-}
-
-const digraph = new MyCustomDigraph();
-const node1 = new MyCustomNode('A');
-const node2 = new MyCustomNode('B');
-const edge = new MyCustomEdge([node1, node2]);
-digraph.addNode(node1);
-digraph.addNode(node2);
-digraph.addEdge(edge);
-const dot = toDot(digraph);
-// digraph "G" {
-//   label = "This is Custom Digraph";
-//   "node_A" [
-//     label = "This is Custom Node A";
-//   ];
-//   "node_B" [
-//     label = "This is Custom Node B";
-//   ];
-//   "node_A" -> "node_B" [
-//     label = "This is Custom Edge";
-//   ];
-// }
-```
-
-##### Models Context API ( `with` メソッド) 🧅
-
-あなたは _Models Context API_ をつかうことで、Graphの内部で生成されるオブジェクトもカスタムクラスにすることができます。
-
-
-`GraphBaseModel` の実装である `Digraph`, `Graph`, `Subgraph` が持つ `with` メソッドは、 カスタムモデルを事前定義するために提供されています。
-
-```typescript
-const g = new Digraph();
-g.with({
-  Node: MyCustomNode,
-  Edge: MyCustomEdge,
-});
-const a = g.createNode('A'); // MyCustomNode
-const b = g.createNode('B'); // MyCustomNode
-g.createEdge([a, b]); // MyCustomEdge
-const dot = toDot(g);
-// digraph {
-//   "node_A" [
-//     label = "This is Custom Node A";
-//   ];
-//   "node_B" [
-//     label = "This is Custom Node B";
-//   ];
-//   "node_A" -> "node_B" [
-//     label = "This is Custom Edge";
-//   ];
-// }
-```
-
-##### `fromDot` 関数 ⏪
-
-> この関数のステータスは ![beta](https://img.shields.io/badge/-beta-orange) です。
-
-このライブラリを使用するメインシナリオは `toDot` 関数を使用することにありますが、逆方向の変換もサポートしています。
-
-**DOT** を **Model** に変換により、コードの一部をDOT言語で記述することができます。
-
-
-```typescript
-const G = fromDot(
-  `digraph {
-    node_A [
-      label = "This is a Label of Node A";
-    ];
-  }`,
-);
-
-G.edge(['node_A', 'node_B']);
-
-const dot = toDot(G)
-// digraph {
-//   "node_A" [
-//     label = "This is a Label of Node A";
-//   ];
-//   "node_A" -> "node_B";
-// }
-```
-
-</details>
-
-
-#### 宣言的な API 😎
-
-`Graph` や `Digraph` を作成する際に、より **DOT** 言語に近い記法を提供するために _Model Factory_ を使うことができます。
-
-**Model** にも宣言的な API を用意しており、一貫して宣言的なパラダイムを選択することもできます。
-
-```typescript
-import { attribute as _, digraph, toDot } from 'ts-graphviz';
-
- const G = digraph('G', (g) => {
-  const a = g.node('aa');
-  const b = g.node('bb');
-  const c = g.node('cc');
-  g.edge([a, b, c], {
-    [_.color]: 'red'
-  });
-  g.subgraph('A', (A) => {
-    const Aa = A.node('Aaa', {
-      [_.color]: 'pink'
-    });
-
-    const Ab = A.node('Abb', {
-      [_.color]: 'violet'
-    });
-    const Ac = A.node('Acc');
-    A.edge([Aa.port('a'), Ab, Ac, 'E'], {
-      [_.color]: 'red'
-    });
-  });
-});
-
-const dot = toDot(G);
-// digraph "G" {
-//   "aa";
-//   "bb";
-//   "cc";
-//   subgraph "A" {
-//     "Aaa" [
-//       color = "pink",
-//     ];
-//     "Abb" [
-//       color = "violet",
-//     ];
-//     "Acc";
-//     "Aaa":"a" -> "Abb" -> "Acc" -> "E" [
-//       color = "red",
-//     ];
-//   }
-//   "aa" -> "bb" -> "cc" [
-//     color = "red",
-//   ];
-// }
-```
-
-> **Note** もちろん、strictモードのグラフを作るAPIも提供しています。
->
-> ```typescript
-> import { strict, toDot } from 'ts-graphviz';
->
-> const G = strict.graph(...);
-> const dot = toDot(G);
-> // strict graph {
-> // }
-> ```
-
-
-<details>
-<summary>高度な使い方</summary>
-
-##### Models Context API ( `withContext` 関数 ) 💈
-
-
-`withContext` 関数は、 _Model Factory_ 関数を返します。
-
-この _Model Factory_ は、 `Digraph` や `Graph` など、 `RootGraphModel` をカスタムクラスに置き換える手段を提供します。
-
-これのAPIにより、宣言的APIとカスタムクラスを統合する手段を提供します。
-
-```typescript
-const { digraph } = withContext({
-  Digraph: MyCustomDigraph,
-  Node: MyCustomNode,
-  Edge: MyCustomEdge,
-});
-
-const G = digraph((g) => {
-  const a = g.node('A'); // MyCustomNode
-  const b = g.node('B'); // MyCustomNode
-  g.edge([a, b]); // MyCustomEdge
-});
-const dot = toDot(g);
-// digraph "G" {
-//   label = "This is Custom Digraph";
-//   "node_A" [
-//     label = "This is Custom Node A";
-//   ];
-//   "node_B" [
-//     label = "This is Custom Node B";
-//   ];
-//   "node_A" -> "node_B" [
-//     label = "This is Custom Edge";
-//   ];
-// }
-```
-
-</details>
-
-### `ts-graphviz/ast` モジュール 🔢
-
-> このパッケージのステータスは ![beta](https://img.shields.io/badge/-beta-orange) です。
-
-高度な利用のためにASTを扱うためのAPIを提供しています。
-
-![State Machine](./media/state-machine.svg)
-
-状態遷移図で記載している通り、下記の関数を提供しています。
-
-- **Model** から **AST** に変換する `fromModel` 関数
-- **AST** から **Model** に変換する `toModel` 関数
-- **AST** から **DOT** に変換する `stringify` 関数
-- **DOT** から **AST** に変換する `parse` 関数
-
-> **Note** 上記の図からわかるように、`ts-graphviz` パッケージで提供している `toDot` 関数は、 `fromModel` と `stringify` の合成関数です。また、`fromDot` 関数は、 `parse` と `toModel` の合成関数です。
-
-詳しい利用方法は整備中です。
-TypeScriptの型定義を参考にしてください。
-
-<details>
-<summary>parse 関数とAST</summary>
-
-
-```typescript
-import { parse } from 'ts-graphviz/ast';
-
-const ast = parse(`
-  digraph example {
-    node1 [
-      label = "My Node",
-    ]
-  }
-`);
-// {
-//   type: 'Dot',
-//   location: {
-//     start: { offset: 3, line: 2, column: 3 },
-//     end: { offset: 68, line: 7, column: 1 }
-//   },
-//   children: [
-//     {
-//       id: {
-//         value: 'example',
-//         quoted: false,
-//         type: 'Literal',
-//         location: {
-//           start: { offset: 11, line: 2, column: 11 },
-//           end: { offset: 18, line: 2, column: 18 }
-//         },
-//         children: []
-//       },
-//       directed: true,
-//       strict: false,
-//       type: 'Graph',
-//       location: {
-//         start: { offset: 3, line: 2, column: 3 },
-//         end: { offset: 67, line: 6, column: 4 }
-//       },
-//       children: [
-//         {
-//           id: {
-//             value: 'node1',
-//             quoted: false,
-//             type: 'Literal',
-//             location: {
-//               start: { offset: 25, line: 3, column: 5 },
-//               end: { offset: 30, line: 3, column: 10 }
-//             },
-//             children: []
-//           },
-//           type: 'Node',
-//           location: {
-//             start: { offset: 25, line: 3, column: 5 },
-//             end: { offset: 63, line: 5, column: 6 }
-//           },
-//           children: [
-//             {
-//               key: {
-//                 value: 'label',
-//                 quoted: false,
-//                 type: 'Literal',
-//                 location: {
-//                   start: { offset: 39, line: 4, column: 7 },
-//                   end: { offset: 44, line: 4, column: 12 }
-//                 },
-//                 children: []
-//               },
-//               value: {
-//                 value: 'My Node',
-//                 quoted: true,
-//                 type: 'Literal',
-//                 location: {
-//                   start: { offset: 47, line: 4, column: 15 },
-//                   end: { offset: 56, line: 4, column: 24 }
-//                 },
-//                 children: []
-//               },
-//               location: {
-//                 start: { offset: 39, line: 4, column: 7 },
-//                 end: { offset: 57, line: 4, column: 25 }
-//               },
-//               type: 'Attribute',
-//               children: []
-//             }
-//           ]
-//         }
-//       ]
-//     }
-//   ]
-// }
-```
-
-</details>
-
-## 関連プロジェクト 💫
-
-関連するプロジェクトは [**ts-graphviz** GitHub Organization](https://github.com/ts-graphviz) で確認することができます。
-
-TypeScript/JavaScript エコシステムで Graphviz との結合度を高め、より使いやすくすることを目的に様々な OSS を提供しています。
-
-## コントリビュータ 👥
-
-この素晴らしい人たち（[emoji key](https://allcontributors.org/docs/en/emoji-key)）に感謝します。
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center"><a href="http://blog.kamiazya.tech/"><img src="https://avatars0.githubusercontent.com/u/35218186?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yuki Yamazaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Tests">⚠️</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=kamiazya" title="Documentation">📖</a> <a href="#ideas-kamiazya" title="Ideas, Planning, & Feedback">🤔</a></td>
-      <td align="center"><a href="https://laysent.com"><img src="https://avatars2.githubusercontent.com/u/1191606?v=4?s=100" width="100px;" alt=""/><br /><sub><b>LaySent</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3Alaysent" title="Bug reports">🐛</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=laysent" title="Tests">⚠️</a></td>
-      <td align="center"><a href="https://github.com/elasticdotventures"><img src="https://avatars0.githubusercontent.com/u/35611074?v=4?s=100" width="100px;" alt=""/><br /><sub><b>elasticdotventures</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=elasticdotventures" title="Documentation">📖</a></td>
-      <td align="center"><a href="https://github.com/ChristianMurphy"><img src="https://avatars.githubusercontent.com/u/3107513?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian Murphy</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=ChristianMurphy" title="Code">💻</a> <a href="#ideas-ChristianMurphy" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ts-graphviz/ts-graphviz/commits?author=ChristianMurphy" title="Documentation">📖</a></td>
-    </tr>
-  </tobdy>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-このプロジェクトは、[all-contributors](https://github.com/all-contributors/all-contributors) の仕様に準拠しています。
-
-どのような種類の貢献でも歓迎します。
-
-## 貢献の方法 💪
-
-一番簡単な貢献の方法は、ライブラリを使っていただくことと、 [リポジトリ](https://github.com/ts-graphviz/ts-graphviz) にスターをつけることです。
-
-### 質問 💭
-
-[GitHub Discussions](https://github.com/ts-graphviz/ts-graphviz/discussions) で気軽に質問してください。
-
-### バグの報告/追加機能の要望 💡
-
-[GitHub Issues](https://github.com/ts-graphviz/ts-graphviz/issues/new/choose) から登録してください。
-
-### 機能開発/バグ修正 🧑‍💻
-
-[CONTRIBUTING.md](https://github.com/ts-graphviz/ts-graphviz/blob/main/CONTRIBUTING.md) を参照してください。
-
-### 金銭的支援 💸
-
-コアメンバーの [kamiazya](https://github.com/sponsors/kamiazya) を支援してください。
-
-> **Note** たった1ドルでも、私には十分な開発のモチベーションになります 😊
-
-## ライセンス ⚖️
-
-本ソフトウェアはMITライセンスのもとで公開されています。
-[LICENSE](https://github.com/ts-graphviz/ts-graphviz/blob/main/LICENSE)を参照してください。