From 3f21f59f55be0fd6b8d926487349a6d21010e54c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 3 Oct 2024 23:50:24 +0530 Subject: [PATCH] docs: Auto generate shape docs Not keen on how it's currently run, open to suggestions on better ways. --- .esbuild/docs.ts | 34 +++++++ docs/syntax/flowchart.md | 96 ++++++++++--------- packages/mermaid/.gitignore | 1 + packages/mermaid/package.json | 3 +- packages/mermaid/src/docs/syntax/flowchart.md | 49 +--------- .../rendering-elements/shapes.cli.ts | 8 ++ .../rendering-elements/shapes.spec.ts | 56 +++++++++++ .../rendering-elements/shapesDoc.ts | 29 ++++++ 8 files changed, 181 insertions(+), 95 deletions(-) create mode 100644 .esbuild/docs.ts create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes.cli.ts create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes.spec.ts create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts diff --git a/.esbuild/docs.ts b/.esbuild/docs.ts new file mode 100644 index 000000000..61e362346 --- /dev/null +++ b/.esbuild/docs.ts @@ -0,0 +1,34 @@ +import { execFileSync } from 'child_process'; +import { build } from 'esbuild'; +import { rm } from 'fs/promises'; +import { generateLangium } from '../.build/generateLangium.js'; +import type { MermaidBuildOptions } from './util.js'; +import { defaultOptions, getBuildConfig } from './util.js'; + +const buildDocs = async () => { + const option: MermaidBuildOptions = { + ...defaultOptions, + options: { + file: 'rendering-util/rendering-elements/shapes.cli.ts', + name: 'mermaid-shapes', + packageName: 'mermaid', + }, + } as const; + + await build({ ...getBuildConfig(option), splitting: false, sourcemap: false }); +}; + +const handler = (e) => { + // eslint-disable-next-line no-console + console.error(e); + process.exit(1); +}; + +const main = async () => { + await generateLangium(); + await buildDocs().catch(handler); + execFileSync('node', ['packages/mermaid/dist/mermaid-shapes.esm.mjs']); + await rm('packages/mermaid/dist/mermaid-shapes.esm.mjs'); +}; + +void main(); diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 5cb2193aa..dfd20d232 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -316,53 +316,55 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases: -| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** | -| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | -------------------------------------------------------------- | -| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` | -| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` | -| **Terminal Point** | Stadium | `stadium` | Terminal point | `terminal`, `pill` | -| **Subprocess** | Framed Rectangle | `fr-rect` | Subprocess | `subprocess`,`subproc`, `framed-rectangle`, `subroutine` | -| **Database** | Cylinder | `cyl` | Database storage | `db`, `database`, `cylinder` | -| **Start** | Circle | `circle` | Starting point | `circ` | -| **Odd** | Odd | `odd` | Odd shape | | -| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` | -| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` | -| **Data Input/Output** | Lean Right | `lean-r` | Represents input or output | `lean-right`, `in-out` | -| **Data Input/Output** | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` | -| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom` | -| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` | -| **Stop** | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` | -| **Text Block** | Text Block | `text` | Text block | - | -| **Card** | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` | -| **Lined/Shaded Process** | Lined Rectangle | `lin-rect` | Lined process shape | `lined-rectangle`,`lined-process`, `lin-proc`,`shaded-process` | -| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` | -| **Stop** | Framed Circle | `fr-circ` | Stop point | `stop`, `framed-circle` | -| **Fork/Join** | Filled Rectangle | `fork` | Fork or join in process flow | `join` | -| **Collate** | Hourglass | `hourglass` | Represents a collate operation | `hourglass` | -| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` | -| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - | -| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - | -| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` | -| **Document** | Document | `doc` | Represents a document | `doc`, `document` | -| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` | -| **Direct Access Storage** | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` | -| **Disk Storage** | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` | -| **Display** | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` | -| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle`, `divided-process` | -| **Extract** | Triangle | `tri` | Extraction process | `extract`, `triangle` | -| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` | -| **Junction** | Filled Circle | `f-circ` | Junction point | `junction`, `filled-circle` | -| **Lined Document** | Lined Document | `lin-doc` | Lined document | `lined-document` | -| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` | -| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` | -| **Manual Input** | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` | -| **Multi-Document** | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` | -| **Multi-Process** | Stacked Rectangle | `st-rect` | Multiple processes | `procs`, `processes`, `stacked-rectangle` | -| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` | -| **Stored Data** | Bow Tie Rectangle | `bow-rect` | Stored data | `stored-data`, `bow-tie-rectangle` | -| **Summary** | Crossed Circle | `cross-circ` | Summary | `summary`, `crossed-circle` | -| **Tagged Document** | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` | -| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tagged-rectangle`,`tag-proc`, `tagged-process` | + + +| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** | +| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- | +| Card | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` | +| Collate | Hourglass | `hourglass` | Represents a collate operation | `collate`, `hourglass` | +| Com Link | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` | +| Comment | Curly Brace | `brace` | Adds a comment | `brace-l`, `comment` | +| Comment Right | Curly Brace | `brace-r` | Adds a comment | | +| Comment with braces on both sides | Curly Braces | `braces` | Adds a comment | | +| Data Input/Output | Lean Right | `lean-r` | Represents input or output | `in-out`, `lean-right` | +| Data Input/Output | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` | +| Database | Cylinder | `cyl` | Database storage | `cylinder`, `database`, `db` | +| Decision | Diamond | `diam` | Decision-making step | `decision`, `diamond`, `question` | +| Delay | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` | +| Direct Access Storage | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` | +| Disk Storage | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` | +| Display | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` | +| Divided Process | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-process`, `divided-rectangle` | +| Document | Document | `doc` | Represents a document | `doc`, `document` | +| Event | Rounded Rectangle | `rounded` | Represents an event | `event` | +| Extract | Triangle | `tri` | Extraction process | `extract`, `triangle` | +| Fork/Join | Filled Rectangle | `fork` | Fork or join in process flow | `join` | +| Internal Storage | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` | +| Junction | Filled Circle | `f-circ` | Junction point | `filled-circle`, `junction` | +| Lined Document | Lined Document | `lin-doc` | Lined document | `lined-document` | +| Lined/Shaded Process | Lined Rectangle | `lin-rect` | Lined process shape | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` | +| Loop Limit | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` | +| Manual File | Flipped Triangle | `flip-tri` | Manual file operation | `flipped-triangle`, `manual-file` | +| Manual Input | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` | +| Manual Operation | Trapezoid Base Top | `trap-t` | Represents a manual task | `inv-trapezoid`, `manual`, `trapezoid-top` | +| Multi-Document | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` | +| Multi-Process | Stacked Rectangle | `st-rect` | Multiple processes | `processes`, `procs`, `stacked-rectangle` | +| Odd | Odd | `odd` | Odd shape | | +| Paper Tape | Flag | `flag` | Paper tape | `paper-tape` | +| Prepare Conditional | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` | +| Priority Action | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid`, `trapezoid-bottom` | +| Process | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` | +| Start | Circle | `circle` | Starting point | `circ` | +| Start | Small Circle | `sm-circ` | Small starting point | `small-circle`, `start` | +| Stop | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` | +| Stop | Framed Circle | `fr-circ` | Stop point | `framed-circle`, `stop` | +| Stored Data | Bow Tie Rectangle | `bow-rect` | Stored data | `bow-tie-rectangle`, `stored-data` | +| Subprocess | Framed Rectangle | `fr-rect` | Subprocess | `framed-rectangle`, `subproc`, `subprocess`, `subroutine` | +| Summary | Crossed Circle | `cross-circ` | Summary | `crossed-circle`, `summary` | +| Tagged Document | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` | +| Tagged Process | Tagged Rectangle | `tag-rect` | Tagged process | `tag-proc`, `tagged-process`, `tagged-rectangle` | +| Terminal Point | Stadium | `stadium` | Terminal point | `pill`, `terminal` | +| Text Block | Text Block | `text` | Text block | | ### Example Flowchart with New Shapes diff --git a/packages/mermaid/.gitignore b/packages/mermaid/.gitignore index 91c74fe7d..ff0a6cc9e 100644 --- a/packages/mermaid/.gitignore +++ b/packages/mermaid/.gitignore @@ -4,3 +4,4 @@ README.* src/docs/public/user-avatars/ src/docs/.vitepress/cache src/docs/.vitepress/components.d.ts +src/docs/syntax/shapesTable.md diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 8e06dd90d..e3ed7113d 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -35,7 +35,8 @@ "clean": "rimraf dist", "dev": "pnpm -w dev", "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup", - "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts", + "docs:build": "rimraf ../../docs && pnpm docs:shapes && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts", + "docs:shapes": "cd ../.. && tsx .esbuild/docs.ts", "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify", "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 9d37a4033..dd923f84a 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -212,53 +212,8 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases: -| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** | -| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | -------------------------------------------------------------- | -| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` | -| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` | -| **Terminal Point** | Stadium | `stadium` | Terminal point | `terminal`, `pill` | -| **Subprocess** | Framed Rectangle | `fr-rect` | Subprocess | `subprocess`,`subproc`, `framed-rectangle`, `subroutine` | -| **Database** | Cylinder | `cyl` | Database storage | `db`, `database`, `cylinder` | -| **Start** | Circle | `circle` | Starting point | `circ` | -| **Odd** | Odd | `odd` | Odd shape | | -| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` | -| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` | -| **Data Input/Output** | Lean Right | `lean-r` | Represents input or output | `lean-right`, `in-out` | -| **Data Input/Output** | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` | -| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom` | -| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` | -| **Stop** | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` | -| **Text Block** | Text Block | `text` | Text block | - | -| **Card** | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` | -| **Lined/Shaded Process** | Lined Rectangle | `lin-rect` | Lined process shape | `lined-rectangle`,`lined-process`, `lin-proc`,`shaded-process` | -| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` | -| **Stop** | Framed Circle | `fr-circ` | Stop point | `stop`, `framed-circle` | -| **Fork/Join** | Filled Rectangle | `fork` | Fork or join in process flow | `join` | -| **Collate** | Hourglass | `hourglass` | Represents a collate operation | `hourglass` | -| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` | -| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - | -| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - | -| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` | -| **Document** | Document | `doc` | Represents a document | `doc`, `document` | -| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` | -| **Direct Access Storage** | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` | -| **Disk Storage** | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` | -| **Display** | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` | -| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle`, `divided-process` | -| **Extract** | Triangle | `tri` | Extraction process | `extract`, `triangle` | -| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` | -| **Junction** | Filled Circle | `f-circ` | Junction point | `junction`, `filled-circle` | -| **Lined Document** | Lined Document | `lin-doc` | Lined document | `lined-document` | -| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` | -| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` | -| **Manual Input** | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` | -| **Multi-Document** | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` | -| **Multi-Process** | Stacked Rectangle | `st-rect` | Multiple processes | `procs`, `processes`, `stacked-rectangle` | -| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` | -| **Stored Data** | Bow Tie Rectangle | `bow-rect` | Stored data | `stored-data`, `bow-tie-rectangle` | -| **Summary** | Crossed Circle | `cross-circ` | Summary | `summary`, `crossed-circle` | -| **Tagged Document** | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` | -| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tagged-rectangle`,`tag-proc`, `tagged-process` | + + ### Example Flowchart with New Shapes diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.cli.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.cli.ts new file mode 100644 index 000000000..098b3f179 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.cli.ts @@ -0,0 +1,8 @@ +import { writeFile } from 'fs/promises'; +import { buildShapeDoc } from './shapesDoc.js'; + +export const writeShapeDoc = async () => { + await writeFile('packages/mermaid/src/docs/syntax/shapesTable.md', buildShapeDoc()); +}; + +void writeShapeDoc(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.spec.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.spec.ts new file mode 100644 index 000000000..9df052e80 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.spec.ts @@ -0,0 +1,56 @@ +import { describe, it } from 'vitest'; +import { buildShapeDoc } from './shapesDoc.js'; + +describe('build shapesTable', () => { + it('should build shapesTable based on the shapeDefs', () => { + expect(buildShapeDoc()).toMatchInlineSnapshot(` + "| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** | + | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- | + | Card | Notched Rectangle | \`notch-rect\` | Represents a card | \`card\`, \`notched-rectangle\` | + | Collate | Hourglass | \`hourglass\` | Represents a collate operation | \`collate\`, \`hourglass\` | + | Com Link | Lightning Bolt | \`bolt\` | Communication link | \`com-link\`, \`lightning-bolt\` | + | Comment | Curly Brace | \`brace\` | Adds a comment | \`brace-l\`, \`comment\` | + | Comment Right | Curly Brace | \`brace-r\` | Adds a comment | | + | Comment with braces on both sides | Curly Braces | \`braces\` | Adds a comment | | + | Data Input/Output | Lean Right | \`lean-r\` | Represents input or output | \`in-out\`, \`lean-right\` | + | Data Input/Output | Lean Left | \`lean-l\` | Represents output or input | \`lean-left\`, \`out-in\` | + | Database | Cylinder | \`cyl\` | Database storage | \`cylinder\`, \`database\`, \`db\` | + | Decision | Diamond | \`diam\` | Decision-making step | \`decision\`, \`diamond\`, \`question\` | + | Delay | Half-Rounded Rectangle | \`delay\` | Represents a delay | \`half-rounded-rectangle\` | + | Direct Access Storage | Horizontal Cylinder | \`h-cyl\` | Direct access storage | \`das\`, \`horizontal-cylinder\` | + | Disk Storage | Lined Cylinder | \`lin-cyl\` | Disk storage | \`disk\`, \`lined-cylinder\` | + | Display | Curved Trapezoid | \`curv-trap\` | Represents a display | \`curved-trapezoid\`, \`display\` | + | Divided Process | Divided Rectangle | \`div-rect\` | Divided process shape | \`div-proc\`, \`divided-process\`, \`divided-rectangle\` | + | Document | Document | \`doc\` | Represents a document | \`doc\`, \`document\` | + | Event | Rounded Rectangle | \`rounded\` | Represents an event | \`event\` | + | Extract | Triangle | \`tri\` | Extraction process | \`extract\`, \`triangle\` | + | Fork/Join | Filled Rectangle | \`fork\` | Fork or join in process flow | \`join\` | + | Internal Storage | Window Pane | \`win-pane\` | Internal storage | \`internal-storage\`, \`window-pane\` | + | Junction | Filled Circle | \`f-circ\` | Junction point | \`filled-circle\`, \`junction\` | + | Lined Document | Lined Document | \`lin-doc\` | Lined document | \`lined-document\` | + | Lined/Shaded Process | Lined Rectangle | \`lin-rect\` | Lined process shape | \`lin-proc\`, \`lined-process\`, \`lined-rectangle\`, \`shaded-process\` | + | Loop Limit | Trapezoidal Pentagon | \`notch-pent\` | Loop limit step | \`loop-limit\`, \`notched-pentagon\` | + | Manual File | Flipped Triangle | \`flip-tri\` | Manual file operation | \`flipped-triangle\`, \`manual-file\` | + | Manual Input | Sloped Rectangle | \`sl-rect\` | Manual input step | \`manual-input\`, \`sloped-rectangle\` | + | Manual Operation | Trapezoid Base Top | \`trap-t\` | Represents a manual task | \`inv-trapezoid\`, \`manual\`, \`trapezoid-top\` | + | Multi-Document | Stacked Document | \`docs\` | Multiple documents | \`documents\`, \`st-doc\`, \`stacked-document\` | + | Multi-Process | Stacked Rectangle | \`st-rect\` | Multiple processes | \`processes\`, \`procs\`, \`stacked-rectangle\` | + | Odd | Odd | \`odd\` | Odd shape | | + | Paper Tape | Flag | \`flag\` | Paper tape | \`paper-tape\` | + | Prepare Conditional | Hexagon | \`hex\` | Preparation or condition step | \`hexagon\`, \`prepare\` | + | Priority Action | Trapezoid Base Bottom | \`trap-b\` | Priority action | \`priority\`, \`trapezoid\`, \`trapezoid-bottom\` | + | Process | Rectangle | \`rect\` | Standard process shape | \`proc\`, \`process\`, \`rectangle\` | + | Start | Circle | \`circle\` | Starting point | \`circ\` | + | Start | Small Circle | \`sm-circ\` | Small starting point | \`small-circle\`, \`start\` | + | Stop | Double Circle | \`dbl-circ\` | Represents a stop point | \`double-circle\` | + | Stop | Framed Circle | \`fr-circ\` | Stop point | \`framed-circle\`, \`stop\` | + | Stored Data | Bow Tie Rectangle | \`bow-rect\` | Stored data | \`bow-tie-rectangle\`, \`stored-data\` | + | Subprocess | Framed Rectangle | \`fr-rect\` | Subprocess | \`framed-rectangle\`, \`subproc\`, \`subprocess\`, \`subroutine\` | + | Summary | Crossed Circle | \`cross-circ\` | Summary | \`crossed-circle\`, \`summary\` | + | Tagged Document | Tagged Document | \`tag-doc\` | Tagged document | \`tag-doc\`, \`tagged-document\` | + | Tagged Process | Tagged Rectangle | \`tag-rect\` | Tagged process | \`tag-proc\`, \`tagged-process\`, \`tagged-rectangle\` | + | Terminal Point | Stadium | \`stadium\` | Terminal point | \`pill\`, \`terminal\` | + | Text Block | Text Block | \`text\` | Text block | |" + `); + }); +}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts new file mode 100644 index 000000000..4540c9725 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts @@ -0,0 +1,29 @@ +import { writeFile } from 'fs/promises'; +import { markdownTable } from 'markdown-table'; +import { shapesDefs } from './shapes.js'; + +export const buildShapeDoc = () => { + const data = shapesDefs.map((shape) => { + const { name, semanticName, description, shortName, aliases } = shape; + aliases?.sort(); + const aliasString = aliases?.join('`, `'); + return [ + semanticName, + name, + `\`${shortName}\``, + description, + aliasString ? `\`${aliasString}\`` : '', + ]; + }); + data.sort((a, b) => a[0].localeCompare(b[0])); + return markdownTable([ + ['Semantic Name', 'Shape Name', 'Short Name', 'Description', 'Alias Supported'].map( + (s) => `**${s}**` + ), + ...data, + ]); +}; + +export const writeShapeDoc = async () => { + await writeFile('packages/mermaid/src/docs/syntax/shapesTable.md', buildShapeDoc()); +};