diff --git a/docs/config/setup/mermaid/interfaces/LayoutData.md b/docs/config/setup/mermaid/interfaces/LayoutData.md index 9864ee971..776facd60 100644 --- a/docs/config/setup/mermaid/interfaces/LayoutData.md +++ b/docs/config/setup/mermaid/interfaces/LayoutData.md @@ -10,7 +10,7 @@ # Interface: LayoutData -Defined in: [packages/mermaid/src/rendering-util/types.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L159) +Defined in: [packages/mermaid/src/rendering-util/types.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L153) ## Indexable @@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:159](https://github.co > **config**: [`MermaidConfig`](MermaidConfig.md) -Defined in: [packages/mermaid/src/rendering-util/types.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L162) +Defined in: [packages/mermaid/src/rendering-util/types.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L156) --- @@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:162](https://github.co > **edges**: `Edge`\[] -Defined in: [packages/mermaid/src/rendering-util/types.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L161) +Defined in: [packages/mermaid/src/rendering-util/types.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L155) --- @@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:161](https://github.co > **nodes**: `Node`\[] -Defined in: [packages/mermaid/src/rendering-util/types.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L160) +Defined in: [packages/mermaid/src/rendering-util/types.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L154) diff --git a/docs/layouts/development.md b/docs/layouts/development.md index 05d8680b1..29d7fec33 100644 --- a/docs/layouts/development.md +++ b/docs/layouts/development.md @@ -26,34 +26,13 @@ Before starting, ensure the following: ## ๐Ÿ”„ Step-by-Step Integration -### 1. Clone the Mermaid Repository - -```bash -git clone https://github.com/mermaid-js/mermaid.git -cd mermaid -``` - -### 2. Install Dependencies - -Mermaid uses `pnpm` for dependency management: - -```bash -pnpm i -``` - -### 3. Start the Development Server - -This will spin up a local dev environment with hot reload: - -```bash -pnpm dev -``` +### Refer [Mermaid Contributing Guide](/packages/mermaid/src/docs/community/contributing.md) --- ## ๐Ÿง  Implementing Your Custom Layout Algorithm -### 4. Create Your Layout Folder +### 1. Create Your Layout Folder Navigate to the relevant source directory and create a folder for your new algorithm: @@ -65,7 +44,7 @@ touch myCustomLayout/index.ts > ๐Ÿ“ You can organize supporting files, utils, and types inside this folder. -### 5. Register the Layout Algorithm +### 2. Register the Layout Algorithm Open the file: @@ -91,7 +70,7 @@ This tells Mermaid how to load your layout dynamically by name (`id`). ## ๐Ÿงช Testing Your Algorithm -### 6. Create a Test File +### 3. Create a Test File To visually test your layout implementation, create a test HTML file in: @@ -127,7 +106,7 @@ Inside the file, load your diagram like this: ``` -### 7. Open in Browser +### 4. Open in Browser After running `pnpm dev`, open your test in the browser: diff --git a/docs/layouts/introduction.md b/docs/layouts/introduction.md index e393436db..b8d569263 100644 --- a/docs/layouts/introduction.md +++ b/docs/layouts/introduction.md @@ -114,7 +114,7 @@ IPSep-CoLa is ideal for: ## ๐Ÿ” Comparison Table -| Feature | Dagre | ELK | IPSep-CoLa (Upcoming) | +| Feature | Dagre | ELK | IPSep-CoLa | | ------------------------- | ----------- | ------------------- | ------------------------------ | | Layout Type | Layered DAG | Modular (varied) | Constraint-driven force layout | | Edge Labeling | โš ๏ธ Basic | โœ… Yes | โœ… Smart Placement | diff --git a/packages/mermaid/src/docs/layouts/development.md b/packages/mermaid/src/docs/layouts/development.md index 342dc85ae..8a0e8d5fd 100644 --- a/packages/mermaid/src/docs/layouts/development.md +++ b/packages/mermaid/src/docs/layouts/development.md @@ -20,34 +20,13 @@ Before starting, ensure the following: ## ๐Ÿ”„ Step-by-Step Integration -### 1. Clone the Mermaid Repository - -```bash -git clone https://github.com/mermaid-js/mermaid.git -cd mermaid -``` - -### 2. Install Dependencies - -Mermaid uses `pnpm` for dependency management: - -```bash -pnpm i -``` - -### 3. Start the Development Server - -This will spin up a local dev environment with hot reload: - -```bash -pnpm dev -``` +### Refer [Mermaid Contributing Guide](/packages/mermaid/src/docs/community/contributing.md) --- ## ๐Ÿง  Implementing Your Custom Layout Algorithm -### 4. Create Your Layout Folder +### 1. Create Your Layout Folder Navigate to the relevant source directory and create a folder for your new algorithm: @@ -59,7 +38,7 @@ touch myCustomLayout/index.ts > ๐Ÿ“ You can organize supporting files, utils, and types inside this folder. -### 5. Register the Layout Algorithm +### 2. Register the Layout Algorithm Open the file: @@ -85,7 +64,7 @@ This tells Mermaid how to load your layout dynamically by name (`id`). ## ๐Ÿงช Testing Your Algorithm -### 6. Create a Test File +### 3. Create a Test File To visually test your layout implementation, create a test HTML file in: @@ -121,7 +100,7 @@ Inside the file, load your diagram like this: ``` -### 7. Open in Browser +### 4. Open in Browser After running `pnpm dev`, open your test in the browser: diff --git a/packages/mermaid/src/docs/layouts/introduction.md b/packages/mermaid/src/docs/layouts/introduction.md index 919e1bd9e..f21e96173 100644 --- a/packages/mermaid/src/docs/layouts/introduction.md +++ b/packages/mermaid/src/docs/layouts/introduction.md @@ -108,7 +108,7 @@ IPSep-CoLa is ideal for: ## ๐Ÿ” Comparison Table -| Feature | Dagre | ELK | IPSep-CoLa (Upcoming) | +| Feature | Dagre | ELK | IPSep-CoLa | | ------------------------- | ----------- | ------------------- | ------------------------------ | | Layout Type | Layered DAG | Modular (varied) | Constraint-driven force layout | | Edge Labeling | โš ๏ธ Basic | โœ… Yes | โœ… Smart Placement | diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/adjustLayout.ts b/packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/adjustLayout.ts index 7b5b9e643..7586145fc 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/adjustLayout.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/adjustLayout.ts @@ -20,15 +20,15 @@ export async function adjustLayout( } } - data4Layout.edges.forEach((edge) => { + for (const edge of data4Layout.edges) { insertEdge( groups.edgePaths, - { ...edge }, + edge, {}, data4Layout.type, edge.start, edge.end, data4Layout.diagramId ); - }); + } } diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index 01dafb83f..0ad1c7510 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -72,6 +72,12 @@ interface BaseNode { defaultWidth?: number; imageAspectRatio?: number; constraint?: 'on' | 'off'; + isEdgeLabel?: boolean; + edgeStart?: string; + edgeEnd?: string; + layer?: number; + order?: number; + isDummy?: boolean; } /** @@ -80,23 +86,11 @@ interface BaseNode { export interface ClusterNode extends BaseNode { shape?: ClusterShapeID; isGroup: true; - isEdgeLabel?: boolean; - edgeStart?: string; - edgeEnd?: string; - layer?: number; - order?: number; - isDummy?: boolean; } export interface NonClusterNode extends BaseNode { shape?: ShapeID; isGroup: false; - isEdgeLabel?: boolean; - edgeStart?: string; - edgeEnd?: string; - layer?: number; - order?: number; - isDummy?: boolean; } // Common properties for any node in the system