Add stringify function

README.md

@@ -11,6 +11,17 @@
 
 Graphviz dot language parser for ts-graphviz.
 
+## Key Feature
+
+- Parse function that converts the DOT language to a [ta-graphviz](https://github.com/ts-graphviz/ts-graphviz) model.
+- Provides module that enables operations at AST level.
+- TypeScript Support.
+- Supports multiple runtime and module.
+  - Node.js, Browser and Deno.
+  - UMD, ESM, CommonJS
+
+![State Machine](./img/state-machine.svg)
+
 ## Installation
 
 The module can then be installed using [npm](https://www.npmjs.com/):
@@ -111,7 +122,7 @@ const G = dot`
 `;
 ```
 
-### function convert(ast)
+### `function convert(ast)`
 
 > May change the publishing method.
 
@@ -278,6 +289,15 @@ console.log(ast);
 // }
 ```
 
+#### `function AST.stringify(ast: AST.ASTNode, options?: StringifyOption): string`
+
+Stringify Graphviz AST Node.
+
+- Parameters
+  - `ast` -- Graphviz AST node.
+- Returns
+  - DOT language string.
+
 ## See Also
 
 Graphviz-dot Test and Integration

grammar/dot.peggy

@@ -250,7 +250,7 @@ StringPart
   = StringStart
   / UnicodeDigit
 
-NUMBER "NUMBER" = n:("-"? ("." [0-9]+ / [0-9]+ ("." [0-9]*)?)){ return text(); }
+NUMBER "NUMBER" = n:("-"? ("." [0-9]+ / [0-9]+ ("." [0-9]*)?)) { return text(); }
 
 /* html strings are enclosed in <>. The inside of those strings is xml.  All we
  * care about is a balanced number of <'s and >'s, so we can simplify our life

jest.config.ts

@@ -5,5 +5,6 @@ const config: Config.InitialOptions = {
   testEnvironment: 'node',
   verbose: true,
   collectCoverage: true,
+  snapshotSerializers: ['jest-snapshot-serializer-raw'],
 };
 export default config;

package.json

@@ -36,14 +36,17 @@
     "pretest": "yarn build:peggy",
     "test": "jest",
     "format": "eslint -c .eslintrc.json --ext ts src --fix && prettier --plugin=./prettier-plugin-peggy --write .",
-    "lint": "eslint -c .eslintrc.json --ext ts src"
+    "lint": "eslint -c .eslintrc.json --ext ts src",
+    "create-state-machine-diagram": "ts-node scripts/create-state-machine-diagram"
   },
   "dependencies": {
     "ts-graphviz": "^0.16.0"
   },
   "devDependencies": {
+    "@ts-graphviz/node": "^0.4.0",
     "@types/jest": "^26.0.23",
     "@types/jest-specific-snapshot": "^0.5.5",
+    "@types/svgo": "^2.3.1",
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",
     "eslint": "^7.25.0",
@@ -52,6 +55,7 @@
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
     "jest": "^26.6.3",
+    "jest-snapshot-serializer-raw": "^1.2.0",
     "jest-specific-snapshot": "^5.0.0",
     "peggy": "^1.2.0",
     "prettier": "^2.2.1",
@@ -61,6 +65,7 @@
     "rollup-plugin-dts": "^3.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
+    "svgo": "^2.3.1",
     "ts-dedent": "^2.1.1",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",

scripts/create-state-machine-diagram.ts

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import { digraph, RootCluster } from 'ts-graphviz';
+import { exportToBuffer } from '@ts-graphviz/node';
+import { optimize } from 'svgo';
+
+const writeFile = util.promisify(fs.writeFile);
+
+async function injectStateMachineDiagram(G: RootCluster, filepath: string) {
+  const svg = await exportToBuffer(G, { format: 'svg' }).then((buf) => buf.toString('utf-8'));
+  const { data } = optimize(svg);
+
+  await writeFile(filepath, data);
+}
+
+(async () => {
+  await injectStateMachineDiagram(
+    digraph((g) => {
+      g.node({
+        shape: 'circle',
+        width: 1.5,
+      });
+
+      g.subgraph({ rank: 'same' }, (sub) => {
+        sub.node('AST');
+        sub.node('Model');
+      });
+      g.edge(['DOT', 'AST'], {
+        label: 'AST.paese',
+      });
+      g.edge(['AST', 'DOT'], {
+        label: 'AST.stringify',
+      });
+      g.edge(['AST', 'Model'], {
+        label: 'convert',
+      });
+      g.edge(['DOT', 'Model'], {
+        label: 'paese/dot',
+      });
+      g.edge(['Model', 'DOT'], {
+        label: 'toDot',
+      });
+    }),
+    path.resolve(__dirname, '../img/state-machine.svg'),
+  );
+})();

src/__test__/__snapshots__/ast.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`attribute set HTMLLike value 1`] = `
+exports[`parse attribute set HTMLLike value 1`] = `
 Object {
   "key": Object {
     "location": Object {
@@ -60,7 +60,7 @@ Object {
 }
 `;
 
-exports[`attribute set quoted value 1`] = `
+exports[`parse attribute set quoted value 1`] = `
 Object {
   "key": Object {
     "location": Object {
@@ -112,7 +112,7 @@ Object {
 }
 `;
 
-exports[`attribute set value 1`] = `
+exports[`parse attribute set value 1`] = `
 Object {
   "key": Object {
     "location": Object {
@@ -164,7 +164,7 @@ Object {
 }
 `;
 
-exports[`attributes edge 1`] = `
+exports[`parse attributes edge 1`] = `
 Object {
   "body": Array [
     Object {
@@ -283,7 +283,7 @@ Object {
 }
 `;
 
-exports[`attributes graph 1`] = `
+exports[`parse attributes graph 1`] = `
 Object {
   "body": Array [
     Object {
@@ -402,7 +402,7 @@ Object {
 }
 `;
 
-exports[`attributes node 1`] = `
+exports[`parse attributes node 1`] = `
 Object {
   "body": Array [
     Object {
@@ -570,7 +570,7 @@ Object {
 }
 `;
 
-exports[`attributes with comment 1`] = `
+exports[`parse attributes with comment 1`] = `
 Object {
   "body": Array [
     Object {
@@ -657,7 +657,7 @@ Object {
 }
 `;
 
-exports[`cluster_statements comments 1`] = `
+exports[`parse cluster_statements comments 1`] = `
 Array [
   Object {
     "kind": "slash",
@@ -749,7 +749,7 @@ comment4",
 ]
 `;
 
-exports[`dot with comments 1`] = `
+exports[`parse dot with comments 1`] = `
 Object {
   "body": Array [
     Object {
@@ -821,7 +821,7 @@ Object {
 }
 `;
 
-exports[`edge digraph edge 1`] = `
+exports[`parse edge digraph edge 1`] = `
 Object {
   "body": Array [],
   "location": Object {
@@ -906,7 +906,7 @@ Object {
 }
 `;
 
-exports[`edge edge with attributes 1`] = `
+exports[`parse edge edge with attributes 1`] = `
 Object {
   "body": Array [
     Object {
@@ -1090,7 +1090,7 @@ Object {
 }
 `;
 
-exports[`edge edge with port 1`] = `
+exports[`parse edge edge with port 1`] = `
 Object {
   "body": Array [],
   "location": Object {
@@ -1324,7 +1324,7 @@ Object {
 }
 `;
 
-exports[`edge graph edge 1`] = `
+exports[`parse edge graph edge 1`] = `
 Object {
   "body": Array [],
   "location": Object {
@@ -1409,7 +1409,7 @@ Object {
 }
 `;
 
-exports[`edge grouped edge targets 1`] = `
+exports[`parse edge grouped edge targets 1`] = `
 Object {
   "body": Array [],
   "location": Object {
@@ -1592,7 +1592,7 @@ Object {
 }
 `;
 
-exports[`edge grouped ported edge targets 1`] = `
+exports[`parse edge grouped ported edge targets 1`] = `
 Object {
   "body": Array [],
   "location": Object {
@@ -1860,7 +1860,7 @@ Object {
 }
 `;
 
-exports[`graph anonymous digraph 1`] = `
+exports[`parse graph anonymous digraph 1`] = `
 Object {
   "body": Array [],
   "directed": true,
@@ -1881,7 +1881,7 @@ Object {
 }
 `;
 
-exports[`graph digraph named test 1`] = `
+exports[`parse graph digraph named test 1`] = `
 Object {
   "body": Array [],
   "directed": true,
@@ -1919,7 +1919,7 @@ Object {
 }
 `;
 
-exports[`graph digraph named test(quoted) 1`] = `
+exports[`parse graph digraph named test(quoted) 1`] = `
 Object {
   "body": Array [],
   "directed": true,
@@ -1957,7 +1957,7 @@ Object {
 }
 `;
 
-exports[`graph graph named test 1`] = `
+exports[`parse graph graph named test 1`] = `
 Object {
   "body": Array [],
   "directed": false,
@@ -1995,7 +1995,7 @@ Object {
 }
 `;
 
-exports[`graph strict digraph named test 1`] = `
+exports[`parse graph strict digraph named test 1`] = `
 Object {
   "body": Array [],
   "directed": true,
@@ -2033,7 +2033,7 @@ Object {
 }
 `;
 
-exports[`graph strict graph named test 1`] = `
+exports[`parse graph strict graph named test 1`] = `
 Object {
   "body": Array [],
   "directed": false,
@@ -2071,7 +2071,7 @@ Object {
 }
 `;
 
-exports[`node node with attributes 1`] = `
+exports[`parse node node with attributes 1`] = `
 Object {
   "body": Array [
     Object {
@@ -2255,7 +2255,7 @@ Object {
 }
 `;
 
-exports[`node simple node 1`] = `
+exports[`parse node simple node 1`] = `
 Object {
   "body": Array [],
   "id": Object {
@@ -2291,7 +2291,7 @@ Object {
 }
 `;
 
-exports[`subgraph anonymous subgraph 1`] = `
+exports[`parse subgraph anonymous subgraph 1`] = `
 Object {
   "body": Array [],
   "location": Object {
@@ -2310,7 +2310,7 @@ Object {
 }
 `;
 
-exports[`subgraph named subgraph 1`] = `
+exports[`parse subgraph named subgraph 1`] = `
 Object {
   "body": Array [],
   "id": Object {
@@ -2346,7 +2346,7 @@ Object {
 }
 `;
 
-exports[`subgraph no keyword anonymous 1`] = `
+exports[`parse subgraph no keyword anonymous 1`] = `
 Object {
   "body": Array [],
   "location": Object {