From c5a19f6e8563c6d26f5a8f5102150d946fe2f054 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 3 Oct 2024 22:08:30 +0530 Subject: [PATCH 01/27] chore: Organize shape handling --- .../rendering-elements/nodes.js | 314 +----------- .../rendering-elements/shapes.ts | 477 ++++++++++++++++++ 2 files changed, 485 insertions(+), 306 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes.ts diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index 55deb1b78..ee31a3cc2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -1,305 +1,5 @@ import { log } from '../../logger.js'; -import { state } from './shapes/state.ts'; -import { roundedRect } from './shapes/roundedRect.ts'; -import { squareRect } from './shapes/squareRect.ts'; -import { stateStart } from './shapes/stateStart.ts'; -import { stateEnd } from './shapes/stateEnd.ts'; -import { forkJoin } from './shapes/forkJoin.ts'; -import { choice } from './shapes/choice.ts'; -import { note } from './shapes/note.ts'; -import { stadium } from './shapes/stadium.js'; -import { rectWithTitle } from './shapes/rectWithTitle.js'; -import { subroutine } from './shapes/subroutine.js'; -import { cylinder } from './shapes/cylinder.js'; -import { circle } from './shapes/circle.js'; -import { doublecircle } from './shapes/doubleCircle.js'; -import { rect_left_inv_arrow } from './shapes/rectLeftInvArrow.js'; -import { question } from './shapes/question.js'; -import { hexagon } from './shapes/hexagon.js'; -import { text } from './shapes/text.js'; -import { card } from './shapes/card.js'; -import { shadedProcess } from './shapes/shadedProcess.js'; -import { anchor } from './shapes/anchor.js'; -import { lean_right } from './shapes/leanRight.js'; -import { lean_left } from './shapes/leanLeft.js'; -import { trapezoid } from './shapes/trapezoid.js'; -import { inv_trapezoid } from './shapes/invertedTrapezoid.js'; -import { labelRect } from './shapes/labelRect.js'; -import { triangle } from './shapes/triangle.js'; -import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js'; -import { curvedTrapezoid } from './shapes/curvedTrapezoid.js'; -import { slopedRect } from './shapes/slopedRect.js'; -import { bowTieRect } from './shapes/bowTieRect.js'; -import { dividedRectangle } from './shapes/dividedRect.js'; -import { crossedCircle } from './shapes/crossedCircle.js'; -import { waveRectangle } from './shapes/waveRectangle.js'; -import { tiltedCylinder } from './shapes/tiltedCylinder.js'; -import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js'; -import { flippedTriangle } from './shapes/flippedTriangle.js'; -import { hourglass } from './shapes/hourglass.js'; -import { taggedRect } from './shapes/taggedRect.js'; -import { multiRect } from './shapes/multiRect.js'; -import { linedCylinder } from './shapes/linedCylinder.js'; -import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js'; -import { lightningBolt } from './shapes/lightningBolt.js'; -import { filledCircle } from './shapes/filledCircle.js'; -import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js'; -import { windowPane } from './shapes/windowPane.js'; -import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js'; -import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js'; -import { curlyBraceLeft } from './shapes/curlyBraceLeft.js'; -import { curlyBraceRight } from './shapes/curlyBraceRight.js'; -import { curlyBraces } from './shapes/curlyBraces.js'; -import { iconSquare } from './shapes/iconSquare.js'; -import { iconCircle } from './shapes/iconCircle.js'; -import { icon } from './shapes/icon.js'; -import { imageSquare } from './shapes/imageSquare.js'; -import { iconRounded } from './shapes/iconRounded.js'; - -//Use these names as the left side to render shapes. -export const shapes = { - // States - state, - stateStart, - stateEnd, - forkJoin, - choice, - note, - - // Rectangles - rectWithTitle, - roundedRect, - squareRect, - - // Rectangle with alias: 'process', 'rect', 'proc', 'rectangle' - rectangle: squareRect, - rect: squareRect, - process: squareRect, - proc: squareRect, - - // Rounded Rectangle with alias: 'event', 'rounded' - rounded: roundedRect, - event: roundedRect, - - // Stadium with alias: 'terminal','pill', 'stadium' - stadium, - pill: stadium, - terminal: stadium, - - // Subprocess with alias: 'fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine' - subroutine, - 'framed-rectangle': subroutine, - 'fr-rect': subroutine, - subprocess: subroutine, - subproc: subroutine, - - // Cylinder with alias: 'db', 'database', 'cylinder', 'cyl' - cylinder, - db: cylinder, - cyl: cylinder, - database: cylinder, - - // Diamond with alias: 'diam', 'decision', 'diamond' - question, - diam: question, - diamond: question, - decision: question, - - // Hexagon with alias: 'hex', 'hexagon', 'prepare' - hexagon, - hex: hexagon, - prepare: hexagon, - - // Lean Right with alias: 'lean-r', 'lean-right', 'in-out' - lean_right, // used in old syntax for flowchart - 'lean-r': lean_right, - 'lean-right': lean_right, - 'in-out': lean_right, - - // Lean Left with alias: 'lean-l', 'lean-left', 'out-in' - lean_left, // used in old syntax for flowchart - 'lean-l': lean_left, - 'lean-left': lean_left, - 'out-in': lean_left, - - // Trapezoid with alias: 'trap-b', 'trapezoid-bottom', 'priority' - trapezoid, // used in old syntax for flowchart - 'trap-b': trapezoid, - 'trapezoid-bottom': trapezoid, - priority: trapezoid, - - // Inverted Trapezoid with alias: 'inv-trapezoid', 'trapezoid-top', 'trap-t', 'manual' - inv_trapezoid, // used in old syntax for flowchart - 'inv-trapezoid': inv_trapezoid, - 'trapezoid-top': inv_trapezoid, - 'trap-t': inv_trapezoid, - manual: inv_trapezoid, - - // Double Circle with alias: 'dbl-circ', 'double-circle' - doublecircle, // used in old syntax for flowchart - 'dbl-circ': doublecircle, - 'double-circle': doublecircle, - - // circle with alias: 'circ', 'circle' - circle, - circ: circle, - - // Rect Left Inv Arrow with alias: 'odd', 'rect-left-inv-arrow' - rect_left_inv_arrow, - odd: rect_left_inv_arrow, - - // Notched Rectangle with alias: 'notched-rectangle', 'notch-rect', 'card' - card, - 'notched-rectangle': card, - 'notch-rect': card, - - // Lined rectangle with alias: 'lin-rect', 'lined-rectangle', 'lin-proc', lined-process', 'shaded-process' - 'lined-rectangle': shadedProcess, - 'lin-rect': shadedProcess, - 'lin-proc': shadedProcess, - 'lined-process': shadedProcess, - 'shaded-process': shadedProcess, - - // Small circle with alias: 'sm-circ', 'small-circle', 'start' - 'small-circle': stateStart, - 'sm-circ': stateStart, - start: stateStart, - - // framed circle with alias: 'stop', 'framed-circle', 'fr-circ' - stop: stateEnd, - 'framed-circle': stateEnd, - 'fr-circ': stateEnd, - - // fork with alias: 'join', 'fork' - join: forkJoin, - fork: forkJoin, - - // comment with alias: 'comment', 'brace-l' - comment: curlyBraceLeft, - 'brace-l': curlyBraceLeft, - - // lightening bolt with alias: 'bolt', 'com-link', 'lightning-bolt' - bolt: lightningBolt, - 'com-link': lightningBolt, - 'lightning-bolt': lightningBolt, - - // document with alias: 'doc', 'document' - doc: waveEdgedRectangle, - document: waveEdgedRectangle, - - // delay with alias: 'delay', 'half-rounded-rectangle' - delay: halfRoundedRectangle, - 'half-rounded-rectangle': halfRoundedRectangle, - - // horizontal cylinder with alias: 'h-cyl', 'das', 'horizontal-cylinder' - 'horizontal-cylinder': tiltedCylinder, - 'h-cyl': tiltedCylinder, - das: tiltedCylinder, - - // lined cylinder with alias: 'lin-cyl', 'lined-cylinder', 'disk' - 'lined-cylinder': linedCylinder, - 'lin-cyl': linedCylinder, - disk: linedCylinder, - - // curved trapezoid with alias: 'curv-trap', 'curved-trapezoid', 'display' - 'curved-trapezoid': curvedTrapezoid, - 'curv-trap': curvedTrapezoid, - display: curvedTrapezoid, - - // divided rectangle with alias: 'div-rect', 'divided-rectangle', 'div-proc', 'divided-process' - 'divided-rectangle': dividedRectangle, - 'div-rect': dividedRectangle, - 'div-proc': dividedRectangle, - 'divided-process': dividedRectangle, - - // triangle with alias: 'tri', 'triangle', 'extract' - triangle, - tri: triangle, - extract: triangle, - - // window pane with alias: 'window-pane', 'win-pane', 'internal-storage' - 'window-pane': windowPane, - 'win-pane': windowPane, - 'internal-storage': windowPane, - - // filled circle with alias: 'f-circ', 'filled-circle', 'junction' - 'f-circ': filledCircle, - junction: filledCircle, - 'filled-circle': filledCircle, - - // lined document with alias: 'lin-doc', 'lined-document' - 'lin-doc': linedWaveEdgedRect, - 'lined-document': linedWaveEdgedRect, - - // notched pentagon with alias: 'notch-pent', 'notched-pentagon', 'loop-limit' - 'notched-pentagon': trapezoidalPentagon, - 'notch-pent': trapezoidalPentagon, - 'loop-limit': trapezoidalPentagon, - - // flipped triangle with alias: 'flip-tri', 'flipped-triangle', 'manual-file' - 'flipped-triangle': flippedTriangle, - 'flip-tri': flippedTriangle, - 'manual-file': flippedTriangle, - - // sloped rectangle with alias: 'sl-rect', 'sloped-rectangle', 'manual-input' - 'sloped-rectangle': slopedRect, - 'sl-rect': slopedRect, - 'manual-input': slopedRect, - - // documents with alias: 'docs', 'documents', 'st-doc', 'stacked-document' - docs: multiWaveEdgedRectangle, - documents: multiWaveEdgedRectangle, - 'st-doc': multiWaveEdgedRectangle, - 'stacked-document': multiWaveEdgedRectangle, - - // 'processes' with alias: 'procs', 'processes', 'st-rect', 'stacked-rectangle' - processes: multiRect, - procs: multiRect, - 'stacked-rectangle': multiRect, - 'st-rect': multiRect, - - // flag with alias: 'flag', 'paper-tape' - flag: waveRectangle, - 'paper-tape': waveRectangle, - - // bow tie rectangle with alias: 'bow-rect', 'bow-tie-rectangle', 'stored-data' - 'bow-tie-rectangle': bowTieRect, - 'bow-rect': bowTieRect, - 'stored-data': bowTieRect, - - // crossed circle with alias: 'cross-circ', 'crossed-circle', 'summary' - 'crossed-circle': crossedCircle, - 'cross-circ': crossedCircle, - summary: crossedCircle, - - // tagged document with alias: 'tag-doc', 'tagged-document' - 'tag-doc': taggedWaveEdgedRectangle, - 'tagged-document': taggedWaveEdgedRectangle, - - // tagged rectangle with alias: 'tag-rect', 'tagged-rectangle', 'tag-proc', 'tagged-process' - 'tag-rect': taggedRect, - 'tagged-rectangle': taggedRect, - 'tag-proc': taggedRect, - 'tagged-process': taggedRect, - - // hourglass with alias: 'hourglass', 'collate' - hourglass, - collate: hourglass, - - text, - anchor, - - brace: curlyBraceLeft, - - labelRect, - 'brace-r': curlyBraceRight, - braces: curlyBraces, - iconSquare, - iconCircle, - icon, - iconRounded, - imageSquare, -}; +import { shapes } from './shapes.js'; const nodeElems = new Map(); @@ -307,8 +7,6 @@ export const insertNode = async (elem, node, renderOptions) => { let newEl; let el; - // console.log("node is ", node.icon, node.shape) - //special check for rect shape (with or without rounded corners) if (node.shape === 'rect') { if (node.rx && node.ry) { @@ -318,7 +16,9 @@ export const insertNode = async (elem, node, renderOptions) => { } } - if (!shapes[node.shape]) { + const shapeHandler = shapes.get(node.shape); + + if (!shapeHandler) { throw new Error(`No such shape: ${node.shape}. Please check your syntax.`); } @@ -331,9 +31,9 @@ export const insertNode = async (elem, node, renderOptions) => { target = node.linkTarget || '_blank'; } newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target); - el = await shapes[node.shape](newEl, node, renderOptions); + el = await shapeHandler(newEl, node, renderOptions); } else { - el = await shapes[node.shape](elem, node, renderOptions); + el = await shapeHandler(elem, node, renderOptions); newEl = el; } if (node.tooltip) { @@ -347,9 +47,11 @@ export const insertNode = async (elem, node, renderOptions) => { } return newEl; }; + export const setNodeElem = (elem, node) => { nodeElems.set(node.id, elem); }; + export const clear = () => { nodeElems.clear(); }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts new file mode 100644 index 000000000..2c220a7d5 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -0,0 +1,477 @@ +import type { Node, ShapeRenderOptions } from '../types.js'; +import { anchor } from './shapes/anchor.js'; +import { bowTieRect } from './shapes/bowTieRect.js'; +import { card } from './shapes/card.js'; +import { choice } from './shapes/choice.js'; +import { circle } from './shapes/circle.js'; +import { crossedCircle } from './shapes/crossedCircle.js'; +import { curlyBraceLeft } from './shapes/curlyBraceLeft.js'; +import { curlyBraceRight } from './shapes/curlyBraceRight.js'; +import { curlyBraces } from './shapes/curlyBraces.js'; +import { curvedTrapezoid } from './shapes/curvedTrapezoid.js'; +import { cylinder } from './shapes/cylinder.js'; +import { dividedRectangle } from './shapes/dividedRect.js'; +import { doublecircle } from './shapes/doubleCircle.js'; +import { filledCircle } from './shapes/filledCircle.js'; +import { flippedTriangle } from './shapes/flippedTriangle.js'; +import { forkJoin } from './shapes/forkJoin.js'; +import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js'; +import { hexagon } from './shapes/hexagon.js'; +import { hourglass } from './shapes/hourglass.js'; +import { icon } from './shapes/icon.js'; +import { iconCircle } from './shapes/iconCircle.js'; +import { iconRounded } from './shapes/iconRounded.js'; +import { iconSquare } from './shapes/iconSquare.js'; +import { imageSquare } from './shapes/imageSquare.js'; +import { inv_trapezoid } from './shapes/invertedTrapezoid.js'; +import { labelRect } from './shapes/labelRect.js'; +import { lean_left } from './shapes/leanLeft.js'; +import { lean_right } from './shapes/leanRight.js'; +import { lightningBolt } from './shapes/lightningBolt.js'; +import { linedCylinder } from './shapes/linedCylinder.js'; +import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js'; +import { multiRect } from './shapes/multiRect.js'; +import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js'; +import { note } from './shapes/note.js'; +import { question } from './shapes/question.js'; +import { rect_left_inv_arrow } from './shapes/rectLeftInvArrow.js'; +import { rectWithTitle } from './shapes/rectWithTitle.js'; +import { roundedRect } from './shapes/roundedRect.js'; +import { shadedProcess } from './shapes/shadedProcess.js'; +import { slopedRect } from './shapes/slopedRect.js'; +import { squareRect } from './shapes/squareRect.js'; +import { stadium } from './shapes/stadium.js'; +import { state } from './shapes/state.js'; +import { stateEnd } from './shapes/stateEnd.js'; +import { stateStart } from './shapes/stateStart.js'; +import { subroutine } from './shapes/subroutine.js'; +import { taggedRect } from './shapes/taggedRect.js'; +import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js'; +import { text } from './shapes/text.js'; +import { tiltedCylinder } from './shapes/tiltedCylinder.js'; +import { trapezoid } from './shapes/trapezoid.js'; +import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js'; +import { triangle } from './shapes/triangle.js'; +import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js'; +import { waveRectangle } from './shapes/waveRectangle.js'; +import { windowPane } from './shapes/windowPane.js'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type ShapeHandler = (parent: any, node: Node, options: ShapeRenderOptions) => unknown; + +export interface ShapeDefinition { + semanticName: string; + name: string; + shortName: string; + description: string; + aliases?: string[]; + legacyAliases?: string[]; + handler: ShapeHandler; +} + +export const shapesDefs: ShapeDefinition[] = [ + { + semanticName: 'Process', + name: 'Rectangle', + shortName: 'rect', + description: 'Standard process shape', + aliases: ['proc', 'process', 'rectangle'], + handler: squareRect, + }, + { + semanticName: 'Event', + name: 'Rounded Rectangle', + shortName: 'rounded', + description: 'Represents an event', + aliases: ['event'], + handler: roundedRect, + }, + { + semanticName: 'Terminal Point', + name: 'Stadium', + shortName: 'stadium', + description: 'Terminal point', + aliases: ['terminal', 'pill'], + handler: stadium, + }, + { + semanticName: 'Subprocess', + name: 'Framed Rectangle', + shortName: 'fr-rect', + description: 'Subprocess', + aliases: ['subprocess', 'subproc', 'framed-rectangle', 'subroutine'], + handler: subroutine, + }, + { + semanticName: 'Database', + name: 'Cylinder', + shortName: 'cyl', + description: 'Database storage', + aliases: ['db', 'database', 'cylinder'], + handler: cylinder, + }, + { + semanticName: 'Start', + name: 'Circle', + shortName: 'circle', + description: 'Starting point', + aliases: ['circ'], + handler: circle, + }, + { + semanticName: 'Decision', + name: 'Diamond', + shortName: 'diam', + description: 'Decision-making step', + aliases: ['decision', 'diamond', 'question'], + handler: question, + }, + { + semanticName: 'Prepare Conditional', + name: 'Hexagon', + shortName: 'hex', + description: 'Preparation or condition step', + aliases: ['hexagon', 'prepare'], + handler: hexagon, + }, + { + semanticName: 'Data Input/Output', + name: 'Lean Right', + shortName: 'lean-r', + description: 'Represents input or output', + aliases: ['lean-right', 'in-out'], + legacyAliases: ['lean_right'], + handler: lean_right, + }, + { + semanticName: 'Data Input/Output', + name: 'Lean Left', + shortName: 'lean-l', + description: 'Represents output or input', + aliases: ['lean-left', 'out-in'], + legacyAliases: ['lean_left'], + handler: lean_left, + }, + { + semanticName: 'Priority Action', + name: 'Trapezoid Base Bottom', + shortName: 'trap-b', + description: 'Priority action', + aliases: ['priority', 'trapezoid-bottom', 'trapezoid'], + handler: trapezoid, + }, + { + semanticName: 'Manual Operation', + name: 'Trapezoid Base Top', + shortName: 'trap-t', + description: 'Represents a manual task', + aliases: ['manual', 'trapezoid-top', 'inv-trapezoid'], + legacyAliases: ['inv_trapezoid'], + handler: inv_trapezoid, + }, + { + semanticName: 'Stop', + name: 'Double Circle', + shortName: 'dbl-circ', + description: 'Represents a stop point', + aliases: ['double-circle'], + legacyAliases: ['doublecircle'], + handler: doublecircle, + }, + { + semanticName: 'Text Block', + name: 'Text Block', + shortName: 'text', + description: 'Text block', + handler: text, + }, + { + semanticName: 'Card', + name: 'Notched Rectangle', + shortName: 'notch-rect', + description: 'Represents a card', + aliases: ['card', 'notched-rectangle'], + handler: card, + }, + { + semanticName: 'Lined/Shaded Process', + name: 'Lined Rectangle', + shortName: 'lin-rect', + description: 'Lined process shape', + aliases: ['lined-rectangle', 'lined-process', 'lin-proc', 'shaded-process'], + handler: shadedProcess, + }, + { + semanticName: 'Start', + name: 'Small Circle', + shortName: 'sm-circ', + description: 'Small starting point', + aliases: ['start', 'small-circle'], + handler: stateStart, + }, + { + semanticName: 'Stop', + name: 'Framed Circle', + shortName: 'fr-circ', + description: 'Stop point', + aliases: ['stop', 'framed-circle'], + handler: stateEnd, + }, + { + semanticName: 'Fork/Join', + name: 'Filled Rectangle', + shortName: 'fork', + description: 'Fork or join in process flow', + aliases: ['join'], + handler: forkJoin, + }, + { + semanticName: 'Collate', + name: 'Hourglass', + shortName: 'hourglass', + description: 'Represents a collate operation', + aliases: ['hourglass', 'collate'], + handler: hourglass, + }, + { + semanticName: 'Comment', + name: 'Curly Brace', + shortName: 'brace', + description: 'Adds a comment', + aliases: ['comment', 'brace-l'], + handler: curlyBraceLeft, + }, + { + semanticName: 'Comment Right', + name: 'Curly Brace', + shortName: 'brace-r', + description: 'Adds a comment', + handler: curlyBraceRight, + }, + { + semanticName: 'Comment with braces on both sides', + name: 'Curly Braces', + shortName: 'braces', + description: 'Adds a comment', + handler: curlyBraces, + }, + { + semanticName: 'Com Link', + name: 'Lightning Bolt', + shortName: 'bolt', + description: 'Communication link', + aliases: ['com-link', 'lightning-bolt'], + handler: lightningBolt, + }, + { + semanticName: 'Document', + name: 'Document', + shortName: 'doc', + description: 'Represents a document', + aliases: ['doc', 'document'], + handler: waveEdgedRectangle, + }, + { + semanticName: 'Delay', + name: 'Half-Rounded Rectangle', + shortName: 'delay', + description: 'Represents a delay', + aliases: ['half-rounded-rectangle'], + handler: halfRoundedRectangle, + }, + { + semanticName: 'Direct Access Storage', + name: 'Horizontal Cylinder', + shortName: 'h-cyl', + description: 'Direct access storage', + aliases: ['das', 'horizontal-cylinder'], + handler: tiltedCylinder, + }, + { + semanticName: 'Disk Storage', + name: 'Lined Cylinder', + shortName: 'lin-cyl', + description: 'Disk storage', + aliases: ['disk', 'lined-cylinder'], + handler: linedCylinder, + }, + { + semanticName: 'Display', + name: 'Curved Trapezoid', + shortName: 'curv-trap', + description: 'Represents a display', + aliases: ['curved-trapezoid', 'display'], + handler: curvedTrapezoid, + }, + { + semanticName: 'Divided Process', + name: 'Divided Rectangle', + shortName: 'div-rect', + description: 'Divided process shape', + aliases: ['div-proc', 'divided-rectangle', 'divided-process'], + handler: dividedRectangle, + }, + { + semanticName: 'Extract', + name: 'Triangle', + shortName: 'tri', + description: 'Extraction process', + aliases: ['extract', 'triangle'], + handler: triangle, + }, + { + semanticName: 'Internal Storage', + name: 'Window Pane', + shortName: 'win-pane', + description: 'Internal storage', + aliases: ['internal-storage', 'window-pane'], + handler: windowPane, + }, + { + semanticName: 'Junction', + name: 'Filled Circle', + shortName: 'f-circ', + description: 'Junction point', + aliases: ['junction', 'filled-circle'], + handler: filledCircle, + }, + { + semanticName: 'Loop Limit', + name: 'Trapezoidal Pentagon', + shortName: 'notch-pent', + description: 'Loop limit step', + aliases: ['loop-limit', 'notched-pentagon'], + handler: trapezoidalPentagon, + }, + { + semanticName: 'Manual File', + name: 'Flipped Triangle', + shortName: 'flip-tri', + description: 'Manual file operation', + aliases: ['manual-file', 'flipped-triangle'], + handler: flippedTriangle, + }, + { + semanticName: 'Manual Input', + name: 'Sloped Rectangle', + shortName: 'sl-rect', + description: 'Manual input step', + aliases: ['manual-input', 'sloped-rectangle'], + handler: slopedRect, + }, + { + semanticName: 'Multi-Document', + name: 'Stacked Document', + shortName: 'docs', + description: 'Multiple documents', + aliases: ['documents', 'st-doc', 'stacked-document'], + handler: multiWaveEdgedRectangle, + }, + { + semanticName: 'Multi-Process', + name: 'Stacked Rectangle', + shortName: 'st-rect', + description: 'Multiple processes', + aliases: ['procs', 'processes', 'stacked-rectangle'], + handler: multiRect, + }, + { + semanticName: 'Stored Data', + name: 'Bow Tie Rectangle', + shortName: 'bow-rect', + description: 'Stored data', + aliases: ['stored-data', 'bow-tie-rectangle'], + handler: bowTieRect, + }, + { + semanticName: 'Summary', + name: 'Crossed Circle', + shortName: 'cross-circ', + description: 'Summary', + aliases: ['summary', 'crossed-circle'], + handler: crossedCircle, + }, + { + semanticName: 'Tagged Document', + name: 'Tagged Document', + shortName: 'tag-doc', + description: 'Tagged document', + aliases: ['tag-doc', 'tagged-document'], + handler: taggedWaveEdgedRectangle, + }, + { + semanticName: 'Tagged Process', + name: 'Tagged Rectangle', + shortName: 'tag-rect', + description: 'Tagged process', + aliases: ['tagged-rectangle', 'tag-proc', 'tagged-process'], + handler: taggedRect, + }, + { + semanticName: 'Paper Tape', + name: 'Flag', + shortName: 'flag', + description: 'Paper tape', + aliases: ['paper-tape'], + handler: waveRectangle, + }, + { + semanticName: 'Odd', + name: 'Odd', + shortName: 'odd', + description: 'Odd shape', + legacyAliases: ['rect_left_inv_arrow'], + handler: rect_left_inv_arrow, + }, + { + semanticName: 'Lined Document', + name: 'Lined Document', + shortName: 'lin-doc', + description: 'Lined document', + aliases: ['lined-document'], + handler: linedWaveEdgedRect, + }, +]; + +const generateShapeMap = () => { + const shapeMap = new Map( + // These are the shapes that didn't have documentation present. + Object.entries({ + // States + state, + stateStart, + stateEnd, + forkJoin, + choice, + note, + + // Rectangles + rectWithTitle, + roundedRect, + squareRect, + labelRect, + + // Icons + iconSquare, + iconCircle, + icon, + iconRounded, + imageSquare, + + anchor, + }) + ); + + for (const shape of shapesDefs) { + for (const alias of [ + shape.shortName, + ...(shape.aliases ?? []), + ...(shape.legacyAliases ?? []), + ]) { + shapeMap.set(alias, shape.handler); + } + } + return shapeMap; +}; + +export const shapes = generateShapeMap(); From 339c6708391c37d1546ca1152276fe1c997a51cc Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 3 Oct 2024 22:12:41 +0530 Subject: [PATCH 02/27] docs: Update new shape registration doc --- docs/adding-new-shape.md | 15 ++++++++++----- packages/mermaid/src/docs/adding-new-shape.md | 15 ++++++++++----- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/docs/adding-new-shape.md b/docs/adding-new-shape.md index b409d7c80..64a177237 100644 --- a/docs/adding-new-shape.md +++ b/docs/adding-new-shape.md @@ -101,7 +101,7 @@ To add a new shape: - **Example**: ```typescript - import { Node, RenderOptions } from '../../types.d.ts'; + import { Node, RenderOptions } from '../../types.ts'; export const myNewShape = async ( parent: SVGAElement, @@ -117,7 +117,7 @@ To add a new shape: ### 2. Register the Shape -- **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system. +- **Register the shape**: Add your shape to the `shapes` object in the [main shapes module](../rendering-util/rendering-elements/shapes.ts). This allows your shape to be recognized and used within the system. - **Example**: @@ -126,9 +126,14 @@ To add a new shape: const shapes = { ..., - 'my-new-shape': myNewShape, - // Shortened alias (if any). - 'm-nsh': myNewShape + { + semanticName: 'My Shape', + name: 'Shape Name', + shortName: '', + description: '', + aliases: ['', '', '', ''], + handler: myNewShape, + }, }; ``` diff --git a/packages/mermaid/src/docs/adding-new-shape.md b/packages/mermaid/src/docs/adding-new-shape.md index b04d5f794..8ba5d083c 100644 --- a/packages/mermaid/src/docs/adding-new-shape.md +++ b/packages/mermaid/src/docs/adding-new-shape.md @@ -95,7 +95,7 @@ To add a new shape: - **Example**: ```typescript - import { Node, RenderOptions } from '../../types.d.ts'; + import { Node, RenderOptions } from '../../types.ts'; export const myNewShape = async ( parent: SVGAElement, @@ -111,7 +111,7 @@ To add a new shape: ### 2. Register the Shape -- **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system. +- **Register the shape**: Add your shape to the `shapes` object in the [main shapes module](../rendering-util/rendering-elements/shapes.ts). This allows your shape to be recognized and used within the system. - **Example**: @@ -120,9 +120,14 @@ To add a new shape: const shapes = { ..., - 'my-new-shape': myNewShape, - // Shortened alias (if any). - 'm-nsh': myNewShape + { + semanticName: 'My Shape', + name: 'Shape Name', + shortName: '', + description: '', + aliases: ['', '', '', ''], + handler: myNewShape, + }, }; ``` From 218bfe16031fe8d4118e719cc1af60973dc993e0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 3 Oct 2024 22:13:00 +0530 Subject: [PATCH 03/27] chore: Update import path --- .../src/rendering-util/rendering-elements/shapes/anchor.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/bowTieRect.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/card.ts | 2 +- .../rendering-util/rendering-elements/shapes/crossedCircle.ts | 2 +- .../rendering-util/rendering-elements/shapes/curlyBraceLeft.ts | 2 +- .../rendering-util/rendering-elements/shapes/curlyBraceRight.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/curlyBraces.ts | 2 +- .../rendering-util/rendering-elements/shapes/curvedTrapezoid.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/dividedRect.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/document.ts | 2 +- .../rendering-util/rendering-elements/shapes/filledCircle.ts | 2 +- .../rendering-util/rendering-elements/shapes/flippedTriangle.ts | 2 +- .../rendering-elements/shapes/halfRoundedRectangle.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/hourglass.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/icon.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/iconCircle.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/iconRounded.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/iconSquare.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/imageSquare.ts | 2 +- .../rendering-util/rendering-elements/shapes/lightningBolt.ts | 2 +- .../rendering-elements/shapes/linedWaveEdgedRect.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/multiRect.ts | 2 +- .../rendering-elements/shapes/multiWaveEdgedRectangle.ts | 2 +- .../rendering-util/rendering-elements/shapes/shadedProcess.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/slopedRect.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/taggedRect.ts | 2 +- .../rendering-elements/shapes/taggedWaveEdgedRectangle.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/text.ts | 2 +- .../rendering-util/rendering-elements/shapes/tiltedCylinder.ts | 2 +- .../rendering-elements/shapes/trapezoidalPentagon.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/triangle.ts | 2 +- .../rendering-elements/shapes/waveEdgedRectangle.ts | 2 +- .../rendering-util/rendering-elements/shapes/waveRectangle.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/windowPane.ts | 2 +- 34 files changed, 34 insertions(+), 34 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts index 67ba644d3..af2f1cd63 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts index eb7b305eb..f125b1bae 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts index 683122ba6..e0e7681ad 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts index 7ab0d8397..eb08efe2c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { getNodeClasses, updateNodeBounds } from './util.js'; import type { SVG } from '../../../diagram-api/types.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import intersect from '../intersect/index.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index da8285976..32c13e0e9 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts index 369b97bb8..43f5c65ff 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts index 5c2927b9f..23471b830 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts index cc51daf58..aa9c414e2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts @@ -6,7 +6,7 @@ import { generateCirclePoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 7e00952fd..0fdc79607 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts index 05b2cfc2d..9a76047f4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts index fef522e13..2d53b8bde 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts @@ -1,7 +1,7 @@ import rough from 'roughjs'; import type { SVG } from '../../../diagram-api/types.js'; import { log } from '../../../logger.js'; -import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import type { Node, ShapeRenderOptions } from '../../types.ts'; import intersect from '../intersect/index.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { getNodeClasses, updateNodeBounds } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts index 74eb956b1..9c3ad7f18 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import { createPathFromPoints } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts index e61f2c4e2..b3aa59d12 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts @@ -7,7 +7,7 @@ import { generateCirclePoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts index 70f3de4ac..ed2099df3 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts index d87efaad1..7dec23984 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts @@ -2,7 +2,7 @@ import rough from 'roughjs'; import type { SVG } from '../../../diagram-api/types.js'; import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; -import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import type { Node, ShapeRenderOptions } from '../../types.ts'; import intersect from '../intersect/index.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { labelHelper, updateNodeBounds } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts index 1e18174df..26d4bd8ef 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -2,7 +2,7 @@ import rough from 'roughjs'; import type { SVG } from '../../../diagram-api/types.js'; import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; -import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import type { Node, ShapeRenderOptions } from '../../types.ts'; import intersect from '../intersect/index.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { labelHelper, updateNodeBounds } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts index 8ec7d6ee0..e45ede925 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts @@ -2,7 +2,7 @@ import rough from 'roughjs'; import type { SVG } from '../../../diagram-api/types.js'; import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; -import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import type { Node, ShapeRenderOptions } from '../../types.ts'; import intersect from '../intersect/index.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { createRoundedRectPathD } from './roundedRectPath.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts index df9e790df..358e130ba 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -2,7 +2,7 @@ import rough from 'roughjs'; import type { SVG } from '../../../diagram-api/types.js'; import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; -import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import type { Node, ShapeRenderOptions } from '../../types.ts'; import intersect from '../intersect/index.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { labelHelper, updateNodeBounds } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts index 7cb92da0b..9e867ed42 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts @@ -1,7 +1,7 @@ import rough from 'roughjs'; import type { SVG } from '../../../diagram-api/types.js'; import { log } from '../../../logger.js'; -import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import type { Node, ShapeRenderOptions } from '../../types.ts'; import intersect from '../intersect/index.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { labelHelper, updateNodeBounds } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts index dc17fc26a..53b08e3e7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts @@ -1,6 +1,6 @@ import { log } from '../../../logger.js'; import { getNodeClasses, updateNodeBounds } from './util.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import type { SVG } from '../../../diagram-api/types.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index 42597e5f6..f3e705834 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -5,7 +5,7 @@ import { generateFullSineWavePoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import rough from 'roughjs'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index 33a74b1a4..8df2cf5f1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -1,5 +1,5 @@ import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import intersect from '../intersect/index.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts index 4e7496c24..3d7c306ec 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts @@ -6,7 +6,7 @@ import { generateFullSineWavePoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import rough from 'roughjs'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts index fff4450fd..3a5ffac58 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts index 10c475b0a..cc5cf89a7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts index fb894d55d..174f90842 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts @@ -1,5 +1,5 @@ import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import intersect from '../intersect/index.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index 809e0babb..c1d8d2955 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -6,7 +6,7 @@ import { createPathFromPoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import rough from 'roughjs'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts index abc5c17fe..938e99bba 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String } from './handDrawnShapeStyles.js'; export async function text(parent: SVGAElement, node: Node): Promise { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index 8d737431b..f94073c32 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts @@ -1,5 +1,5 @@ import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import intersect from '../intersect/index.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts index 6c0aec9f5..4bb72f1dd 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts @@ -1,6 +1,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index d93965664..7eb019f7c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import { createPathFromPoints } from './util.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts index 66839eb14..c24cdd604 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts @@ -6,7 +6,7 @@ import { createPathFromPoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import rough from 'roughjs'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts index 981ef31d3..e435baa8e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts @@ -6,7 +6,7 @@ import { generateFullSineWavePoints, } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index 20df8de4a..2dd53f4a8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -1,5 +1,5 @@ import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; -import type { Node } from '../../types.d.ts'; +import type { Node } from '../../types.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import intersect from '../intersect/index.js'; From 0ae4f970367571dee6fcd54bfd18a378d4545503 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 4 Oct 2024 00:05:38 +0530 Subject: [PATCH 04/27] test: Update nodes test --- .../rendering-elements/nodes.js | 2 +- .../{nodes.spec.js => nodes.spec.ts} | 4 +- .../rendering-elements/shapes.ts | 48 +++++++++---------- 3 files changed, 26 insertions(+), 28 deletions(-) rename packages/mermaid/src/rendering-util/rendering-elements/{nodes.spec.js => nodes.spec.ts} (99%) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index ee31a3cc2..2d2b5008f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -16,7 +16,7 @@ export const insertNode = async (elem, node, renderOptions) => { } } - const shapeHandler = shapes.get(node.shape); + const shapeHandler = shapes[node.shape]; if (!shapeHandler) { throw new Error(`No such shape: ${node.shape}. Please check your syntax.`); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts similarity index 99% rename from packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js rename to packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts index bb5287cac..a7a7691e5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts @@ -1,5 +1,5 @@ -import exp from 'constants'; -import { shapes } from './nodes.js'; +import { shapes } from './shapes.js'; +import { describe, it, expect } from 'vitest'; describe('Test Alias for shapes', function () { // for each shape in docs/syntax/flowchart.md, along with its semantic name, short name, and alias name, add a test case diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index 2c220a7d5..a39af1eab 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -434,33 +434,31 @@ export const shapesDefs: ShapeDefinition[] = [ ]; const generateShapeMap = () => { - const shapeMap = new Map( - // These are the shapes that didn't have documentation present. - Object.entries({ - // States - state, - stateStart, - stateEnd, - forkJoin, - choice, - note, + // These are the shapes that didn't have documentation present. + const shapeMap: Record = { + // States + state, + stateStart, + stateEnd, + forkJoin, + choice, + note, - // Rectangles - rectWithTitle, - roundedRect, - squareRect, - labelRect, + // Rectangles + rectWithTitle, + roundedRect, + squareRect, + labelRect, - // Icons - iconSquare, - iconCircle, - icon, - iconRounded, - imageSquare, + // Icons + iconSquare, + iconCircle, + icon, + iconRounded, + imageSquare, - anchor, - }) - ); + anchor, + }; for (const shape of shapesDefs) { for (const alias of [ @@ -468,7 +466,7 @@ const generateShapeMap = () => { ...(shape.aliases ?? []), ...(shape.legacyAliases ?? []), ]) { - shapeMap.set(alias, shape.handler); + shapeMap[alias] = shape.handler; } } return shapeMap; From 5a3e0ccc3dfc108526b1cb2fb6548803a6942d41 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 4 Oct 2024 02:33:45 +0530 Subject: [PATCH 05/27] chore: rebuild --- .../mermaid/src/rendering-util/rendering-elements/shapes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index a39af1eab..e2e8d4236 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -434,7 +434,7 @@ export const shapesDefs: ShapeDefinition[] = [ ]; const generateShapeMap = () => { - // These are the shapes that didn't have documentation present. + // These are the shapes that didn't have documentation present const shapeMap: Record = { // States state, From 0b8f27e1d2c9ecb96c44f01d50e5e1402a7483df Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 7 Oct 2024 15:52:12 +0530 Subject: [PATCH 06/27] Updated icon shape to use css color style instead of stroke --- .../src/rendering-util/rendering-elements/shapes/icon.ts | 2 +- .../rendering-util/rendering-elements/shapes/iconCircle.ts | 6 +++--- .../rendering-util/rendering-elements/shapes/iconRounded.ts | 6 +++--- .../rendering-util/rendering-elements/shapes/iconSquare.ts | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts index d87efaad1..cd0e34669 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts @@ -77,7 +77,7 @@ export const icon = async ( : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY })` ); - iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); + iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`); } label.attr( diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts index 1e18174df..74d399d6e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -26,10 +26,10 @@ export const iconCircle = async ( const topLabel = node.pos === 't'; - const { nodeBorder, mainBkg } = themeVariables; + const { nodeBorder } = themeVariables; const { stylesMap } = compileStyles(node); const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg }); + const options = userNodeOverrides(node, { stroke: 'transparent' }); if (node.look !== 'handDrawn') { options.roughness = 0; @@ -74,7 +74,7 @@ export const iconCircle = async ( : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY })` ); - iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); + iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`); label.attr( 'transform', `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts index 8ec7d6ee0..c98c99b6f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts @@ -30,7 +30,7 @@ export const iconRounded = async ( const height = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2; - const { nodeBorder, mainBkg } = themeVariables; + const { nodeBorder } = themeVariables; const { stylesMap } = compileStyles(node); const x = -width / 2; @@ -39,7 +39,7 @@ export const iconRounded = async ( const labelPadding = node.label ? 8 : 0; const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg }); + const options = userNodeOverrides(node, { stroke: 'transparent' }); if (node.look !== 'handDrawn') { options.roughness = 0; @@ -82,7 +82,7 @@ export const iconRounded = async ( : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY })` ); - iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); + iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`); } label.attr( diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts index df9e790df..3c73d0319 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -29,7 +29,7 @@ export const iconSquare = async ( const height = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2; - const { nodeBorder, mainBkg } = themeVariables; + const { nodeBorder } = themeVariables; const { stylesMap } = compileStyles(node); const x = -width / 2; @@ -38,7 +38,7 @@ export const iconSquare = async ( const labelPadding = node.label ? 8 : 0; const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg }); + const options = userNodeOverrides(node, { stroke: 'transparent' }); if (node.look !== 'handDrawn') { options.roughness = 0; @@ -81,7 +81,7 @@ export const iconSquare = async ( : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY })` ); - iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); + iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`); } label.attr( From d3308232e8f51e2082e258b8992ba19e17418600 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 7 Oct 2024 16:11:31 +0530 Subject: [PATCH 07/27] updated test case for icon shape --- cypress/integration/rendering/iconShape.spec.ts | 17 +++++++++++++++++ cypress/platform/viewer.js | 15 +++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 389e2d94d..e35ad860c 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -124,3 +124,20 @@ describe('Test iconShape with different h', () => { imgSnapshotTest(flowchartCode); }); }); + +describe('Test colored iconShape', () => { + it('with no styles', () => { + let flowchartCode = `flowchart TB\n`; + const icon = 'logos:aws'; + flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`; + imgSnapshotTest(flowchartCode); + }); + + it('with styles', () => { + let flowchartCode = `flowchart TB\n`; + const icon = 'logos:aws'; + flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`; + flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`; + imgSnapshotTest(flowchartCode); + }); +}); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 2882be130..58d317589 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -61,11 +61,26 @@ const contentLoaded = async function () { width: 512, height: 512, }; + const staticAwsLogoIconPack = { + prefix: 'logos', + icons: { + aws: { + body: '', + height: 153, + }, + }, + width: 256, + height: 256, + }; mermaid.registerIconPacks([ { name: 'fa', loader: () => staticBellIconPack, }, + { + name: 'logos', + loader: () => staticAwsLogoIconPack, + }, ]); await mermaid.run(); } From 51be99c9de84500381acde8bbbe63ef30ae0236c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 8 Oct 2024 13:01:31 +0530 Subject: [PATCH 08/27] fix: Remove duplicates, add documentation, rename legacyAlias Co-authored-by: Alois Klink --- .../rendering-elements/shapes.ts | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index e2e8d4236..efa186772 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -64,8 +64,14 @@ export interface ShapeDefinition { name: string; shortName: string; description: string; + /** + * Aliases can include descriptive names, other short names, etc. + */ aliases?: string[]; - legacyAliases?: string[]; + /** + * These are names used by mermaid before the introduction of new shapes. These will not be in standard formats, and shouldn't be used by the users + */ + internalAliases?: string[]; handler: ShapeHandler; } @@ -140,7 +146,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'lean-r', description: 'Represents input or output', aliases: ['lean-right', 'in-out'], - legacyAliases: ['lean_right'], + internalAliases: ['lean_right'], handler: lean_right, }, { @@ -149,7 +155,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'lean-l', description: 'Represents output or input', aliases: ['lean-left', 'out-in'], - legacyAliases: ['lean_left'], + internalAliases: ['lean_left'], handler: lean_left, }, { @@ -166,7 +172,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'trap-t', description: 'Represents a manual task', aliases: ['manual', 'trapezoid-top', 'inv-trapezoid'], - legacyAliases: ['inv_trapezoid'], + internalAliases: ['inv_trapezoid'], handler: inv_trapezoid, }, { @@ -175,7 +181,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'dbl-circ', description: 'Represents a stop point', aliases: ['double-circle'], - legacyAliases: ['doublecircle'], + internalAliases: ['doublecircle'], handler: doublecircle, }, { @@ -420,7 +426,7 @@ export const shapesDefs: ShapeDefinition[] = [ name: 'Odd', shortName: 'odd', description: 'Odd shape', - legacyAliases: ['rect_left_inv_arrow'], + internalAliases: ['rect_left_inv_arrow'], handler: rect_left_inv_arrow, }, { @@ -438,16 +444,11 @@ const generateShapeMap = () => { const shapeMap: Record = { // States state, - stateStart, - stateEnd, - forkJoin, choice, note, // Rectangles rectWithTitle, - roundedRect, - squareRect, labelRect, // Icons @@ -464,7 +465,7 @@ const generateShapeMap = () => { for (const alias of [ shape.shortName, ...(shape.aliases ?? []), - ...(shape.legacyAliases ?? []), + ...(shape.internalAliases ?? []), ]) { shapeMap[alias] = shape.handler; } From f99e2c9366c9128dc811256d3bda687a6427d487 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 8 Oct 2024 13:25:00 +0530 Subject: [PATCH 09/27] fix: Add internalAliases Co-authored-by: Alois Klink --- .../mermaid/src/rendering-util/rendering-elements/shapes.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index efa186772..b336fc823 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -82,6 +82,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'rect', description: 'Standard process shape', aliases: ['proc', 'process', 'rectangle'], + internalAliases: ['squareRect'], handler: squareRect, }, { @@ -90,6 +91,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'rounded', description: 'Represents an event', aliases: ['event'], + internalAliases: ['roundedRect'], handler: roundedRect, }, { @@ -213,6 +215,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'sm-circ', description: 'Small starting point', aliases: ['start', 'small-circle'], + internalAliases: ['stateStart'], handler: stateStart, }, { @@ -221,6 +224,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'fr-circ', description: 'Stop point', aliases: ['stop', 'framed-circle'], + internalAliases: ['stateEnd'], handler: stateEnd, }, { @@ -229,6 +233,7 @@ export const shapesDefs: ShapeDefinition[] = [ shortName: 'fork', description: 'Fork or join in process flow', aliases: ['join'], + internalAliases: ['forkJoin'], handler: forkJoin, }, { From 4062813d4454243a1d82309fd5f27ee93ed13d05 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Tue, 8 Oct 2024 17:45:53 +0530 Subject: [PATCH 10/27] Added docs for icon-shape --- docs/icon-shape.md | 76 +++++++++++++++++++++++++ packages/mermaid/src/docs/icon-shape.md | 70 +++++++++++++++++++++++ 2 files changed, 146 insertions(+) create mode 100644 docs/icon-shape.md create mode 100644 packages/mermaid/src/docs/icon-shape.md diff --git a/docs/icon-shape.md b/docs/icon-shape.md new file mode 100644 index 000000000..64ebe494f --- /dev/null +++ b/docs/icon-shape.md @@ -0,0 +1,76 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/icon-shape.md](../packages/mermaid/src/docs/icon-shape.md). + +# Icon Shape Configuration + +This document provides details on how to configure icon shapes in Mermaid using the specified syntax. + +## Syntax + +```plaintext +Id@{ icon: "icon-name", form: "icon-form", label: "label", pos: "t", h: 60 } +``` + +### Parameters + +- **icon**: The name of the icon from the registered icon pack. +- **form**: Specifies the background shape of the icon. Options include: + - `square` + - `circle` + - `rounded` +- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. Possible values are: + - `t` (top) + - `b` (bottom, default if not provided) +- **h**: The height of the icon in pixels. This parameter is optional and defaults to 48 pixels, which is the minimum height. + +### Example + +```mermaid-example +B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 } +``` + +```mermaid +B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 } +``` + +In this example: + +- The icon is "fa:window-minimize". +- The shape is "rounded". +- The label is "B2". +- The label position is at the top (`t`). +- The height of the icon is 40 pixels. + +### Additional Notes + +Ensure that the icon name corresponds to a valid icon in the registered icon pack to avoid rendering issues. + +### Registering Icon Packs + +To use icons in Mermaid, you need to register the icon packs. Below is an example of how to register icon packs: + +```javascript +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), + }, + { + name: 'fa', + loader: () => + fetch('https://unpkg.com/@iconify-json/fa6-regular@1/icons.json').then((res) => res.json()), + }, +]); +``` + +In this example: + +- The `logos` icon pack is registered by fetching the icons from the specified URL. +- The `fa` (Font Awesome) icon pack is registered similarly. + +Ensure that the URLs provided point to valid Iconify JSON files containing the icon definitions. diff --git a/packages/mermaid/src/docs/icon-shape.md b/packages/mermaid/src/docs/icon-shape.md new file mode 100644 index 000000000..b61fa33aa --- /dev/null +++ b/packages/mermaid/src/docs/icon-shape.md @@ -0,0 +1,70 @@ +--- +title: Icon Shape Configuration +--- + +# Icon Shape Configuration + +This document provides details on how to configure icon shapes in Mermaid using the specified syntax. + +## Syntax + +```plaintext +Id@{ icon: "icon-name", form: "icon-form", label: "label", pos: "t", h: 60 } +``` + +### Parameters + +- **icon**: The name of the icon from the registered icon pack. +- **form**: Specifies the background shape of the icon. Options include: + - `square` + - `circle` + - `rounded` +- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. Possible values are: + - `t` (top) + - `b` (bottom, default if not provided) +- **h**: The height of the icon in pixels. This parameter is optional and defaults to 48 pixels, which is the minimum height. + +### Example + +```mermaid +B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 } +``` + +In this example: + +- The icon is "fa:window-minimize". +- The shape is "rounded". +- The label is "B2". +- The label position is at the top (`t`). +- The height of the icon is 40 pixels. + +### Additional Notes + +Ensure that the icon name corresponds to a valid icon in the registered icon pack to avoid rendering issues. + +### Registering Icon Packs + +To use icons in Mermaid, you need to register the icon packs. Below is an example of how to register icon packs: + +```javascript +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), + }, + { + name: 'fa', + loader: () => + fetch('https://unpkg.com/@iconify-json/fa6-regular@1/icons.json').then((res) => res.json()), + }, +]); +``` + +In this example: + +- The `logos` icon pack is registered by fetching the icons from the specified URL. +- The `fa` (Font Awesome) icon pack is registered similarly. + +Ensure that the URLs provided point to valid Iconify JSON files containing the icon definitions. From 9bac464442667389a2cf3c19e7e75cb0e788c1e1 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Wed, 9 Oct 2024 10:41:37 +0530 Subject: [PATCH 11/27] Use tropical-fish icon with MIT license in e2e tests --- .../integration/rendering/iconShape.spec.ts | 25 +++++++++++++++++-- cypress/platform/viewer.js | 11 ++++---- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index e35ad860c..33c806ac3 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -1,3 +1,24 @@ +/* MIT License + +Copyright (c) Microsoft Corporation. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE */ import { imgSnapshotTest } from '../../helpers/util'; const looks = ['classic', 'handDrawn'] as const; @@ -128,14 +149,14 @@ describe('Test iconShape with different h', () => { describe('Test colored iconShape', () => { it('with no styles', () => { let flowchartCode = `flowchart TB\n`; - const icon = 'logos:aws'; + const icon = 'fluent-emoji:tropical-fish'; flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`; imgSnapshotTest(flowchartCode); }); it('with styles', () => { let flowchartCode = `flowchart TB\n`; - const icon = 'logos:aws'; + const icon = 'fluent-emoji:tropical-fish'; flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`; flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`; imgSnapshotTest(flowchartCode); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 58d317589..4b3b93d98 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -62,11 +62,12 @@ const contentLoaded = async function () { height: 512, }; const staticAwsLogoIconPack = { - prefix: 'logos', + prefix: 'fluent-emoji', icons: { - aws: { - body: '', - height: 153, + 'tropical-fish': { + width: 32, + height: 32, + body: '', }, }, width: 256, @@ -78,7 +79,7 @@ const contentLoaded = async function () { loader: () => staticBellIconPack, }, { - name: 'logos', + name: 'fluent-emoji', loader: () => staticAwsLogoIconPack, }, ]); From a98290a6e2e4fb4e382ae0f3a495c80a1d47639c Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Wed, 9 Oct 2024 11:08:27 +0530 Subject: [PATCH 12/27] remove doc for icon shape --- docs/icon-shape.md | 76 ------------------------- packages/mermaid/src/docs/icon-shape.md | 70 ----------------------- 2 files changed, 146 deletions(-) delete mode 100644 docs/icon-shape.md delete mode 100644 packages/mermaid/src/docs/icon-shape.md diff --git a/docs/icon-shape.md b/docs/icon-shape.md deleted file mode 100644 index 64ebe494f..000000000 --- a/docs/icon-shape.md +++ /dev/null @@ -1,76 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/icon-shape.md](../packages/mermaid/src/docs/icon-shape.md). - -# Icon Shape Configuration - -This document provides details on how to configure icon shapes in Mermaid using the specified syntax. - -## Syntax - -```plaintext -Id@{ icon: "icon-name", form: "icon-form", label: "label", pos: "t", h: 60 } -``` - -### Parameters - -- **icon**: The name of the icon from the registered icon pack. -- **form**: Specifies the background shape of the icon. Options include: - - `square` - - `circle` - - `rounded` -- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. -- **pos**: The position of the label. Possible values are: - - `t` (top) - - `b` (bottom, default if not provided) -- **h**: The height of the icon in pixels. This parameter is optional and defaults to 48 pixels, which is the minimum height. - -### Example - -```mermaid-example -B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 } -``` - -```mermaid -B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 } -``` - -In this example: - -- The icon is "fa:window-minimize". -- The shape is "rounded". -- The label is "B2". -- The label position is at the top (`t`). -- The height of the icon is 40 pixels. - -### Additional Notes - -Ensure that the icon name corresponds to a valid icon in the registered icon pack to avoid rendering issues. - -### Registering Icon Packs - -To use icons in Mermaid, you need to register the icon packs. Below is an example of how to register icon packs: - -```javascript -mermaid.registerIconPacks([ - { - name: 'logos', - loader: () => - fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), - }, - { - name: 'fa', - loader: () => - fetch('https://unpkg.com/@iconify-json/fa6-regular@1/icons.json').then((res) => res.json()), - }, -]); -``` - -In this example: - -- The `logos` icon pack is registered by fetching the icons from the specified URL. -- The `fa` (Font Awesome) icon pack is registered similarly. - -Ensure that the URLs provided point to valid Iconify JSON files containing the icon definitions. diff --git a/packages/mermaid/src/docs/icon-shape.md b/packages/mermaid/src/docs/icon-shape.md deleted file mode 100644 index b61fa33aa..000000000 --- a/packages/mermaid/src/docs/icon-shape.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Icon Shape Configuration ---- - -# Icon Shape Configuration - -This document provides details on how to configure icon shapes in Mermaid using the specified syntax. - -## Syntax - -```plaintext -Id@{ icon: "icon-name", form: "icon-form", label: "label", pos: "t", h: 60 } -``` - -### Parameters - -- **icon**: The name of the icon from the registered icon pack. -- **form**: Specifies the background shape of the icon. Options include: - - `square` - - `circle` - - `rounded` -- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. -- **pos**: The position of the label. Possible values are: - - `t` (top) - - `b` (bottom, default if not provided) -- **h**: The height of the icon in pixels. This parameter is optional and defaults to 48 pixels, which is the minimum height. - -### Example - -```mermaid -B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 } -``` - -In this example: - -- The icon is "fa:window-minimize". -- The shape is "rounded". -- The label is "B2". -- The label position is at the top (`t`). -- The height of the icon is 40 pixels. - -### Additional Notes - -Ensure that the icon name corresponds to a valid icon in the registered icon pack to avoid rendering issues. - -### Registering Icon Packs - -To use icons in Mermaid, you need to register the icon packs. Below is an example of how to register icon packs: - -```javascript -mermaid.registerIconPacks([ - { - name: 'logos', - loader: () => - fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), - }, - { - name: 'fa', - loader: () => - fetch('https://unpkg.com/@iconify-json/fa6-regular@1/icons.json').then((res) => res.json()), - }, -]); -``` - -In this example: - -- The `logos` icon pack is registered by fetching the icons from the specified URL. -- The `fa` (Font Awesome) icon pack is registered similarly. - -Ensure that the URLs provided point to valid Iconify JSON files containing the icon definitions. From a00161946496a1976f3b67d2d322d43e4bc5e1a5 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Wed, 9 Oct 2024 12:15:23 +0530 Subject: [PATCH 13/27] Move MIT license just before icon definition --- .../integration/rendering/iconShape.spec.ts | 21 ------------------- cypress/platform/viewer.js | 21 +++++++++++++++++++ 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 33c806ac3..4c12c3fa3 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -1,24 +1,3 @@ -/* MIT License - -Copyright (c) Microsoft Corporation. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE */ import { imgSnapshotTest } from '../../helpers/util'; const looks = ['classic', 'handDrawn'] as const; diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 4b3b93d98..a9d4d2d81 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -61,6 +61,27 @@ const contentLoaded = async function () { width: 512, height: 512, }; + /* MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE */ const staticAwsLogoIconPack = { prefix: 'fluent-emoji', icons: { From 17b783135f9b2b7748b620dbf81d0f56ab4755f1 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Wed, 9 Oct 2024 12:55:37 +0530 Subject: [PATCH 14/27] Added pnpm changeset --- .changeset/chilly-hotels-mix.md | 5 +++++ .changeset/heavy-cats-mate.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/chilly-hotels-mix.md create mode 100644 .changeset/heavy-cats-mate.md diff --git a/.changeset/chilly-hotels-mix.md b/.changeset/chilly-hotels-mix.md new file mode 100644 index 000000000..642ab6ecf --- /dev/null +++ b/.changeset/chilly-hotels-mix.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Jagged edge fix for icon shape diff --git a/.changeset/heavy-cats-mate.md b/.changeset/heavy-cats-mate.md new file mode 100644 index 000000000..c903cc47e --- /dev/null +++ b/.changeset/heavy-cats-mate.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Icon color fix for colored icons. From 76138cf3b9f51e15663555f11d32b1b3408c495e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 3 Oct 2024 23:15:42 +0530 Subject: [PATCH 15/27] chore: Decouple build logic --- .build/common.ts | 8 +++++++- .esbuild/build.ts | 7 +++++-- .esbuild/util.ts | 15 ++++++++++----- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/.build/common.ts b/.build/common.ts index e2190974f..86ccd15d1 100644 --- a/.build/common.ts +++ b/.build/common.ts @@ -1,3 +1,9 @@ +export interface PackageOptions { + name: string; + packageName: string; + file: string; +} + /** * Shared common options for both ESBuild and Vite */ @@ -27,4 +33,4 @@ export const packageOptions = { packageName: 'mermaid-layout-elk', file: 'layouts.ts', }, -} as const; +} as const satisfies Record; diff --git a/.esbuild/build.ts b/.esbuild/build.ts index 2bb42a557..423e8f047 100644 --- a/.esbuild/build.ts +++ b/.esbuild/build.ts @@ -8,7 +8,10 @@ import { defaultOptions, getBuildConfig } from './util.js'; const shouldVisualize = process.argv.includes('--visualize'); const buildPackage = async (entryName: keyof typeof packageOptions) => { - const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const; + const commonOptions: MermaidBuildOptions = { + ...defaultOptions, + options: packageOptions[entryName], + } as const; const buildConfigs: MermaidBuildOptions[] = [ // package.mjs { ...commonOptions }, @@ -40,7 +43,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => { continue; } const fileName = Object.keys(metafile.outputs) - .find((file) => !file.includes('chunks') && file.endsWith('js')) + .find((file) => !file.includes('chunks') && file.endsWith('js'))! .replace('dist/', ''); // Upload metafile into https://esbuild.github.io/analyze/ await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile)); diff --git a/.esbuild/util.ts b/.esbuild/util.ts index 522176113..6d6d1d59b 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -3,7 +3,7 @@ import { fileURLToPath } from 'url'; import type { BuildOptions } from 'esbuild'; import { readFileSync } from 'fs'; import jsonSchemaPlugin from './jsonSchemaPlugin.js'; -import { packageOptions } from '../.build/common.js'; +import type { PackageOptions } from '../.build/common.js'; import { jisonPlugin } from './jisonPlugin.js'; const __dirname = fileURLToPath(new URL('.', import.meta.url)); @@ -13,10 +13,10 @@ export interface MermaidBuildOptions extends BuildOptions { core: boolean; metafile: boolean; format: 'esm' | 'iife'; - entryName: keyof typeof packageOptions; + options: PackageOptions; } -export const defaultOptions: Omit = { +export const defaultOptions: Omit = { minify: false, metafile: false, core: false, @@ -52,9 +52,14 @@ const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOpt }; export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { - const { core, entryName, metafile, format, minify } = options; + const { + core, + metafile, + format, + minify, + options: { name, file, packageName }, + } = options; const external: string[] = ['require', 'fs', 'path']; - const { name, file, packageName } = packageOptions[entryName]; const outFileName = getFileName(name, options); const output: BuildOptions = buildOptions({ absWorkingDir: resolve(__dirname, `../packages/${packageName}`), From 3720e1a894f00664fcbb30fccf4634f7cbbc0c70 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 3 Oct 2024 23:50:24 +0530 Subject: [PATCH 16/27] 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 5936a5617..87d4a601a 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()); +}; From 1bc45405e0c11363c37350aa3bc50e6895dd5620 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 4 Oct 2024 00:36:01 +0530 Subject: [PATCH 17/27] chore: Generate shape doc before verification --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 87d4a601a..0e5ed4598 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -37,7 +37,7 @@ "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup", "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:verify": "pnpm docs:spellcheck && pnpm docs:code && pnpm docs:shapes && 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", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"", From efa47e3176f6dcdc57c564b731b4c83e67071b8c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 4 Oct 2024 02:54:17 +0530 Subject: [PATCH 18/27] fix: Docs vitepress build --- packages/mermaid/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 0e5ed4598..351ace75c 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -34,10 +34,10 @@ "scripts": { "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:shapes && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts", + "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup && pnpm docs:shapes", + "docs:build": "rimraf ../../docs && pnpm docs:code && pnpm docs:spellcheck && tsx scripts/docs.cli.mts", "docs:shapes": "cd ../.. && tsx .esbuild/docs.ts", - "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && pnpm docs:shapes && tsx scripts/docs.cli.mts --verify", + "docs:verify": "pnpm docs:code && pnpm docs:spellcheck && 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", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"", From 14524e1b0e0090431b8f1ca3f6ea32550ac4d686 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 9 Oct 2024 13:39:06 +0530 Subject: [PATCH 19/27] docs: Optimise document generation Co-authored-by: Alois Klink --- .esbuild/docs.ts | 34 --------- docs/syntax/flowchart.md | 2 - packages/mermaid/.gitignore | 1 - packages/mermaid/package.json | 3 +- packages/mermaid/scripts/docs.mts | 75 ++++++++++++++++++- packages/mermaid/scripts/docs.spec.ts | 57 +++++++++++++- packages/mermaid/scripts/loadHook.mjs | 22 ++++++ packages/mermaid/src/docs/syntax/flowchart.md | 3 +- .../rendering-elements/shapes.cli.ts | 8 -- .../rendering-elements/shapes.spec.ts | 56 -------------- .../rendering-elements/shapesDoc.ts | 29 ------- 11 files changed, 153 insertions(+), 137 deletions(-) delete mode 100644 .esbuild/docs.ts create mode 100644 packages/mermaid/scripts/loadHook.mjs delete mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes.cli.ts delete mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes.spec.ts delete mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts diff --git a/.esbuild/docs.ts b/.esbuild/docs.ts deleted file mode 100644 index 61e362346..000000000 --- a/.esbuild/docs.ts +++ /dev/null @@ -1,34 +0,0 @@ -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 dfd20d232..8f8b54e21 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -316,8 +316,6 @@ 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** | | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- | | Card | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` | diff --git a/packages/mermaid/.gitignore b/packages/mermaid/.gitignore index ff0a6cc9e..91c74fe7d 100644 --- a/packages/mermaid/.gitignore +++ b/packages/mermaid/.gitignore @@ -4,4 +4,3 @@ 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 351ace75c..afee6aab5 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -34,9 +34,8 @@ "scripts": { "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 && pnpm docs:shapes", + "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup", "docs:build": "rimraf ../../docs && pnpm docs:code && pnpm docs:spellcheck && tsx scripts/docs.cli.mts", - "docs:shapes": "cd ../.. && tsx .esbuild/docs.ts", "docs:verify": "pnpm docs:code && pnpm docs:spellcheck && 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/scripts/docs.mts b/packages/mermaid/scripts/docs.mts index 374e78870..073a3c1a9 100644 --- a/packages/mermaid/scripts/docs.mts +++ b/packages/mermaid/scripts/docs.mts @@ -41,7 +41,8 @@ import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; import { dump, load, JSON_SCHEMA } from 'js-yaml'; -import type { Code, ListItem, Root, Text, YAML } from 'mdast'; +import type { Code, ListItem, PhrasingContent, Root, Text, YAML } from 'mdast'; +import { register } from 'node:module'; import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; @@ -53,6 +54,10 @@ import mm from 'micromatch'; import flatmap from 'unist-util-flatmap'; import { visit } from 'unist-util-visit'; +// short-circuit `.schema.yaml` imports, so that we can safely import `shapes.js` +register('./loadHook.mjs', import.meta.url); +const { shapesDefs } = await import('../src/rendering-util/rendering-elements/shapes.js'); + export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8')) .version as string; const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0]; @@ -103,6 +108,60 @@ const generateHeader = (file: string): string => { > ## Please edit the corresponding file in [${filePathFromRoot}](${sourcePathRelativeToGenerated}).`; }; +/** + * Builds a markdown list of shapes supported in flowcharts. + */ +export function buildShapeDoc() { + const data = shapesDefs + .sort((a, b) => a.semanticName.localeCompare(b.semanticName)) + .map((shape): PhrasingContent[][] => { + const { name, semanticName, description, shortName, aliases = [] } = shape; + return [ + [{ type: 'text', value: semanticName }], + [{ type: 'text', value: name }], + [{ type: 'inlineCode', value: shortName }], + [{ type: 'text', value: description }], + aliases.sort().flatMap((alias, index) => [ + ...(index !== 0 ? ([{ type: 'text', value: ', ' }] as const) : []), + { + type: 'inlineCode', + value: alias, + }, + ]), + ]; + }); + + // don't prettify this table, since we'd do it later + return remark() + .use(remarkGfm) + .stringify({ + type: 'root', + children: [ + { + type: 'table', + children: [ + ['Semantic Name', 'Shape Name', 'Short Name', 'Description', 'Alias Supported'].map( + (s): PhrasingContent[] => [ + { + type: 'strong', + children: [{ type: 'text', value: s }], + }, + ] + ), + ...data, + ].map((row) => ({ + type: 'tableRow', + children: row.map((cell) => ({ + type: 'tableCell', + children: cell, + })), + })), + }, + ], + }) + .toString(); +} + /** * Given a source file name and path, return the documentation destination full path and file name * Create the destination path if it does not already exist. @@ -192,10 +251,22 @@ export const transformToBlockQuote = ( const injectPlaceholders = (text: string): string => text.replace(//g, MERMAID_MAJOR_VERSION).replace(//g, CDN_URL); +const virtualGenerators: Record string> = { + shapesTable: buildShapeDoc, +}; + const transformIncludeStatements = (file: string, text: string): string => { // resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76 - return text.replace(includesRE, (m, m1) => { + return text.replace(includesRE, (m, m1: string) => { try { + if (m1.startsWith('virtual:')) { + const key = m1.replace('virtual:', ''); + const generator = virtualGenerators[key]; + if (!generator) { + throw new Error(`Unknown virtual generator: ${key} in "${file}"`); + } + return generator(); + } const includePath = join(dirname(file), m1).replaceAll('\\', '/'); const content = readSyncedUTF8file(includePath); includedFiles.add(changeToFinalDocDir(includePath)); diff --git a/packages/mermaid/scripts/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts index c84bc1bac..68677d4c9 100644 --- a/packages/mermaid/scripts/docs.spec.ts +++ b/packages/mermaid/scripts/docs.spec.ts @@ -1,4 +1,4 @@ -import { transformMarkdownAst, transformToBlockQuote } from './docs.mjs'; +import { buildShapeDoc, transformMarkdownAst, transformToBlockQuote } from './docs.mjs'; import { remark } from 'remark'; // import it this way so we can mock it import remarkFrontmatter from 'remark-frontmatter'; @@ -165,4 +165,59 @@ This Markdown should be kept. }); }); }); + + describe('buildShapeDoc', () => { + 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/scripts/loadHook.mjs b/packages/mermaid/scripts/loadHook.mjs new file mode 100644 index 000000000..50129861b --- /dev/null +++ b/packages/mermaid/scripts/loadHook.mjs @@ -0,0 +1,22 @@ +import { fileURLToPath } from 'node:url'; +/** @import import { LoadHook } from "node:module"; */ +/** + * @type {LoadHook} + * + * Load hook that short circuits the loading of `.schema.yaml` files with `export default {}`. + * These would normally be loaded using ESBuild, but that doesn't work for these local scripts. + * + * @see https://nodejs.org/api/module.html#loadurl-context-nextload + */ +export const load = async (url, context, nextLoad) => { + const filePath = url.startsWith('file://') ? fileURLToPath(url) : url; + if (filePath.endsWith('.schema.yaml')) { + return { + format: 'module', + shortCircuit: true, + source: `export default {}`, + }; + } else { + return await nextLoad(url, context); + } +}; diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index dd923f84a..86347bd80 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -212,8 +212,7 @@ 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: - - + ### 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 deleted file mode 100644 index 098b3f179..000000000 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.cli.ts +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 9df052e80..000000000 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.spec.ts +++ /dev/null @@ -1,56 +0,0 @@ -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 deleted file mode 100644 index 4540c9725..000000000 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts +++ /dev/null @@ -1,29 +0,0 @@ -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()); -}; From 09ecf76034de18edb83f25ff9fdb2c461296dab9 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Wed, 9 Oct 2024 15:34:12 +0530 Subject: [PATCH 20/27] Updated doc for image and icon shapes --- docs/syntax/flowchart.md | 60 +++++++++++++++++++ packages/mermaid/src/docs/syntax/flowchart.md | 50 ++++++++++++++++ 2 files changed, 110 insertions(+) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 8f8b54e21..ea1db9c03 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -926,6 +926,66 @@ flowchart TD A@{ shape: tag-rect, label: "Tagged process" } ``` +## Special shapes in Mermaid Flowcharts (v11.3.0+) + +Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity. + +### Icon Shape + +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/syntax/architecture.html#icons). The syntax for defining an icon shape is as follows: + +```mermaid-example +flowchart TD + A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 } +``` + +```mermaid +flowchart TD + A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 } +``` + +### Parameters + +- **icon**: The name of the icon from the registered icon pack. +- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include: + - `square` + - `circle` + - `rounded` +- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are: + - `t` + - `b` +- **h**: The height of the icon. If not defined this will default to 48 which is minimum. + +### Image Shape + +You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows: + +```mermaid-example +flowchart TD + A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" } +``` + +```mermaid +flowchart TD + A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" } +``` + +### Parameters + +- **img**: The URL of the image to be displayed. +- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are: + - `t` + - `b` +- **w**: The width of the image. If not defined, this will default to the natural width of the image. +- **h**: The height of the image. If not defined, this will default to the natural height of the image. +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are: + - `on` + - `off` + +These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging. + ## Links between nodes Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 86347bd80..1b8cfffc1 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -542,6 +542,56 @@ flowchart TD A@{ shape: tag-rect, label: "Tagged process" } ``` +## Special shapes in Mermaid Flowcharts (v11.3.0+) + +Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity. + +### Icon Shape + +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/syntax/architecture.html#icons). The syntax for defining an icon shape is as follows: + +```mermaid-example +flowchart TD + A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 } +``` + +### Parameters + +- **icon**: The name of the icon from the registered icon pack. +- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include: + - `square` + - `circle` + - `rounded` +- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are: + - `t` + - `b` +- **h**: The height of the icon. If not defined this will default to 48 which is minimum. + +### Image Shape + +You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows: + +```mermaid-example +flowchart TD + A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" } +``` + +### Parameters + +- **img**: The URL of the image to be displayed. +- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are: + - `t` + - `b` +- **w**: The width of the image. If not defined, this will default to the natural width of the image. +- **h**: The height of the image. If not defined, this will default to the natural height of the image. +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are: + - `on` + - `off` + +These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging. + ## Links between nodes Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link. From 2933eb5c288784650d0499a878f98fff8c9790e4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 9 Oct 2024 16:44:51 +0530 Subject: [PATCH 21/27] fix: Build options --- .esbuild/server.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/.esbuild/server.ts b/.esbuild/server.ts index ef61ebec2..6e1bcb460 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -9,13 +9,18 @@ import { generateLangium } from '../.build/generateLangium.js'; import { defaultOptions, getBuildConfig } from './util.js'; const configs = Object.values(packageOptions).map(({ packageName }) => - getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName }) + getBuildConfig({ + ...defaultOptions, + minify: false, + core: false, + options: packageOptions[packageName], + }) ); const mermaidIIFEConfig = getBuildConfig({ ...defaultOptions, minify: false, core: false, - entryName: 'mermaid', + options: packageOptions.mermaid, format: 'iife', }); configs.push(mermaidIIFEConfig); From 9f6f1e96e50b3589a73adfd37d5a1eb35579bba4 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 10 Oct 2024 13:11:54 +0530 Subject: [PATCH 22/27] Added new doc for registering icon pack in mermaid --- docs/config/icons.md | 55 +++++++++++++++++++ docs/syntax/architecture.md | 50 +---------------- docs/syntax/flowchart.md | 2 +- .../mermaid/src/docs/.vitepress/config.ts | 1 + packages/mermaid/src/docs/config/icons.md | 49 +++++++++++++++++ .../mermaid/src/docs/syntax/architecture.md | 50 +---------------- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 7 files changed, 109 insertions(+), 100 deletions(-) create mode 100644 docs/config/icons.md create mode 100644 packages/mermaid/src/docs/config/icons.md diff --git a/docs/config/icons.md b/docs/config/icons.md new file mode 100644 index 000000000..ef0812b50 --- /dev/null +++ b/docs/config/icons.md @@ -0,0 +1,55 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md). + +# Registering icon pack in mermaid + +The icon packs available can be found at [icones.js.org](https://icones.js.org/). +We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. + +Using JSON file directly from CDN: + +```js +import mermaid from 'CDN/mermaid.esm.mjs'; +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); +``` + +Using packages and a bundler: + +```bash +npm install @iconify-json/logos +``` + +With lazy loading + +```js +import mermaid from 'mermaid'; + +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => import('@iconify-json/logos').then((module) => module.icons), + }, +]); +``` + +Without lazy loading + +```js +import mermaid from 'mermaid'; +import { icons } from '@iconify-json/logos'; +mermaid.registerIconPacks([ + { + name: icons.prefix, // To use the prefix defined in the icon pack + icons, + }, +]); +``` diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 12a7cf409..f24c5d607 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -194,55 +194,7 @@ architecture-beta ## Icons By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. -Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below. - -The icon packs available can be found at [icones.js.org](https://icones.js.org/). -We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. - -Using JSON file directly from CDN: - -```js -import mermaid from 'CDN/mermaid.esm.mjs'; -mermaid.registerIconPacks([ - { - name: 'logos', - loader: () => - fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), - }, -]); -``` - -Using packages and a bundler: - -```bash -npm install @iconify-json/logos -``` - -With lazy loading - -```js -import mermaid from 'mermaid'; - -mermaid.registerIconPacks([ - { - name: 'logos', - loader: () => import('@iconify-json/logos').then((module) => module.icons), - }, -]); -``` - -Without lazy loading - -```js -import mermaid from 'mermaid'; -import { icons } from '@iconify-json/logos'; -mermaid.registerIconPacks([ - { - name: icons.prefix, // To use the prefix defined in the icon pack - icons, - }, -]); -``` +Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](https://mermaid.js.org/config/icons.html). After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index ea1db9c03..dd7be9207 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -932,7 +932,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### Icon Shape -You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/syntax/architecture.html#icons). The syntax for defining an icon shape is as follows: +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: ```mermaid-example flowchart TD diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 619de961d..23d8a21bb 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -180,6 +180,7 @@ function sidebarConfig() { { text: 'Accessibility', link: '/config/accessibility' }, { text: 'Mermaid CLI', link: '/config/mermaidCLI' }, { text: 'FAQ', link: '/config/faq' }, + { text: 'Registering icons', link: '/config/icons' }, ], }, ]; diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md new file mode 100644 index 000000000..d5d296281 --- /dev/null +++ b/packages/mermaid/src/docs/config/icons.md @@ -0,0 +1,49 @@ +# Registering icon pack in mermaid + +The icon packs available can be found at [icones.js.org](https://icones.js.org/). +We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. + +Using JSON file directly from CDN: + +```js +import mermaid from 'CDN/mermaid.esm.mjs'; +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); +``` + +Using packages and a bundler: + +```bash +npm install @iconify-json/logos +``` + +With lazy loading + +```js +import mermaid from 'mermaid'; + +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => import('@iconify-json/logos').then((module) => module.icons), + }, +]); +``` + +Without lazy loading + +```js +import mermaid from 'mermaid'; +import { icons } from '@iconify-json/logos'; +mermaid.registerIconPacks([ + { + name: icons.prefix, // To use the prefix defined in the icon pack + icons, + }, +]); +``` diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index 476c60532..53da754c9 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -156,55 +156,7 @@ architecture-beta ## Icons By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. -Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below. - -The icon packs available can be found at [icones.js.org](https://icones.js.org/). -We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. - -Using JSON file directly from CDN: - -```js -import mermaid from 'CDN/mermaid.esm.mjs'; -mermaid.registerIconPacks([ - { - name: 'logos', - loader: () => - fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), - }, -]); -``` - -Using packages and a bundler: - -```bash -npm install @iconify-json/logos -``` - -With lazy loading - -```js -import mermaid from 'mermaid'; - -mermaid.registerIconPacks([ - { - name: 'logos', - loader: () => import('@iconify-json/logos').then((module) => module.icons), - }, -]); -``` - -Without lazy loading - -```js -import mermaid from 'mermaid'; -import { icons } from '@iconify-json/logos'; -mermaid.registerIconPacks([ - { - name: icons.prefix, // To use the prefix defined in the icon pack - icons, - }, -]); -``` +Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](https://mermaid.js.org/config/icons.html). After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 1b8cfffc1..b48b8fb4c 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -548,7 +548,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### Icon Shape -You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/syntax/architecture.html#icons). The syntax for defining an icon shape is as follows: +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: ```mermaid-example flowchart TD From ca885027d4309f52af28d15402b662e3edfa2d83 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 10 Oct 2024 14:15:16 +0530 Subject: [PATCH 23/27] Moved position for icon config and added major version in icon docs --- docs/config/icons.md | 4 ++-- packages/mermaid/src/docs/.vitepress/config.ts | 2 +- packages/mermaid/src/docs/config/icons.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/config/icons.md b/docs/config/icons.md index ef0812b50..729afa1d5 100644 --- a/docs/config/icons.md +++ b/docs/config/icons.md @@ -17,7 +17,7 @@ mermaid.registerIconPacks([ { name: 'logos', loader: () => - fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), }, ]); ``` @@ -25,7 +25,7 @@ mermaid.registerIconPacks([ Using packages and a bundler: ```bash -npm install @iconify-json/logos +npm install @iconify-json/logos@1 ``` With lazy loading diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 23d8a21bb..4dec8231f 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -174,13 +174,13 @@ function sidebarConfig() { { text: 'API-Usage', link: '/config/usage' }, { text: 'Mermaid API Configuration', link: '/config/setup/README' }, { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' }, + { text: 'Registering icons', link: '/config/icons' }, { text: 'Directives', link: '/config/directives' }, { text: 'Theming', link: '/config/theming' }, { text: 'Math', link: '/config/math' }, { text: 'Accessibility', link: '/config/accessibility' }, { text: 'Mermaid CLI', link: '/config/mermaidCLI' }, { text: 'FAQ', link: '/config/faq' }, - { text: 'Registering icons', link: '/config/icons' }, ], }, ]; diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md index d5d296281..db079f841 100644 --- a/packages/mermaid/src/docs/config/icons.md +++ b/packages/mermaid/src/docs/config/icons.md @@ -11,7 +11,7 @@ mermaid.registerIconPacks([ { name: 'logos', loader: () => - fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), }, ]); ``` @@ -19,7 +19,7 @@ mermaid.registerIconPacks([ Using packages and a bundler: ```bash -npm install @iconify-json/logos +npm install @iconify-json/logos@1 ``` With lazy loading From a4fd42214b489b40769b9da1364e2513f6c774ea Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 10 Oct 2024 15:17:26 +0530 Subject: [PATCH 24/27] Use relative URL in linking docs --- docs/syntax/architecture.md | 2 +- docs/syntax/flowchart.md | 2 +- packages/mermaid/src/docs/syntax/architecture.md | 2 +- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index f24c5d607..2ac8a1ed1 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -194,7 +194,7 @@ architecture-beta ## Icons By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. -Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](https://mermaid.js.org/config/icons.html). +Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md). After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index dd7be9207..3837e77de 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -932,7 +932,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### Icon Shape -You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows: ```mermaid-example flowchart TD diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index 53da754c9..2c4de5fd9 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -156,7 +156,7 @@ architecture-beta ## Icons By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. -Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](https://mermaid.js.org/config/icons.html). +Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md). After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index b48b8fb4c..829b71c2d 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -548,7 +548,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### Icon Shape -You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows: ```mermaid-example flowchart TD From 4f97c8c70ea8b69aaf66b4723449c2bcad7ea220 Mon Sep 17 00:00:00 2001 From: "g.bremont-ext" Date: Thu, 10 Oct 2024 16:05:36 +0200 Subject: [PATCH 25/27] docs(architecture): update icon name for database in exemple --- docs/syntax/architecture.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2ac8a1ed1..f0f0e9ac7 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -79,15 +79,15 @@ service {service id}({icon name})[{title}] (in {parent id})? Put together: ``` -service database(db)[Database] +service database1(database)[My Database] ``` -creates the service identified as `database`, using the icon `db`, with the label `Database`. +creates the service identified as `database1`, using the icon `database`, with the label `My Database`. If the service belongs to a group, it can be placed inside it through the optional `in` keyword ``` -service database(db)[Database] in private_api +service database1(database)[My Database] in private_api ``` ### Edges From 2655be0badb38ae155c89862b528b987644623ab Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 10 Oct 2024 14:21:46 +0000 Subject: [PATCH 26/27] [autofix.ci] apply automated fixes --- docs/syntax/architecture.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index f0f0e9ac7..2ac8a1ed1 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -79,15 +79,15 @@ service {service id}({icon name})[{title}] (in {parent id})? Put together: ``` -service database1(database)[My Database] +service database(db)[Database] ``` -creates the service identified as `database1`, using the icon `database`, with the label `My Database`. +creates the service identified as `database`, using the icon `db`, with the label `Database`. If the service belongs to a group, it can be placed inside it through the optional `in` keyword ``` -service database1(database)[My Database] in private_api +service database(db)[Database] in private_api ``` ### Edges From 2c31a599af3c826f357027530a940fd1fb3fff93 Mon Sep 17 00:00:00 2001 From: "g.bremont-ext" Date: Thu, 10 Oct 2024 16:59:46 +0200 Subject: [PATCH 27/27] docs(architecture): use right icon for database in exemple --- docs/syntax/architecture.md | 6 +++--- packages/mermaid/src/docs/syntax/architecture.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2ac8a1ed1..f0f0e9ac7 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -79,15 +79,15 @@ service {service id}({icon name})[{title}] (in {parent id})? Put together: ``` -service database(db)[Database] +service database1(database)[My Database] ``` -creates the service identified as `database`, using the icon `db`, with the label `Database`. +creates the service identified as `database1`, using the icon `database`, with the label `My Database`. If the service belongs to a group, it can be placed inside it through the optional `in` keyword ``` -service database(db)[Database] in private_api +service database1(database)[My Database] in private_api ``` ### Edges diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index 2c4de5fd9..3fc5629f4 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -59,15 +59,15 @@ service {service id}({icon name})[{title}] (in {parent id})? Put together: ``` -service database(db)[Database] +service database1(database)[My Database] ``` -creates the service identified as `database`, using the icon `db`, with the label `Database`. +creates the service identified as `database1`, using the icon `database`, with the label `My Database`. If the service belongs to a group, it can be placed inside it through the optional `in` keyword ``` -service database(db)[Database] in private_api +service database1(database)[My Database] in private_api ``` ### Edges