Resolved comments on pr of ipsep-cola

This commit is contained in:
shubham-mermaid
2025-07-21 13:35:53 +05:30
parent 3e99158c04
commit b01a0d7dcd
7 changed files with 25 additions and 73 deletions

View File

@@ -10,7 +10,7 @@
# Interface: LayoutData # 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 ## Indexable
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:159](https://github.co
> **config**: [`MermaidConfig`](MermaidConfig.md) > **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`\[] > **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`\[] > **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)

View File

@@ -26,34 +26,13 @@ Before starting, ensure the following:
## 🔄 Step-by-Step Integration ## 🔄 Step-by-Step Integration
### 1. Clone the Mermaid Repository ### Refer [Mermaid Contributing Guide](/packages/mermaid/src/docs/community/contributing.md)
```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
```
--- ---
## 🧠 Implementing Your Custom Layout Algorithm ## 🧠 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: 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. > 📁 You can organize supporting files, utils, and types inside this folder.
### 5. Register the Layout Algorithm ### 2. Register the Layout Algorithm
Open the file: Open the file:
@@ -91,7 +70,7 @@ This tells Mermaid how to load your layout dynamically by name (`id`).
## 🧪 Testing Your Algorithm ## 🧪 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: To visually test your layout implementation, create a test HTML file in:
@@ -127,7 +106,7 @@ Inside the file, load your diagram like this:
</html> </html>
``` ```
### 7. Open in Browser ### 4. Open in Browser
After running `pnpm dev`, open your test in the browser: After running `pnpm dev`, open your test in the browser:

View File

@@ -114,7 +114,7 @@ IPSep-CoLa is ideal for:
## 🔍 Comparison Table ## 🔍 Comparison Table
| Feature | Dagre | ELK | IPSep-CoLa (Upcoming) | | Feature | Dagre | ELK | IPSep-CoLa |
| ------------------------- | ----------- | ------------------- | ------------------------------ | | ------------------------- | ----------- | ------------------- | ------------------------------ |
| Layout Type | Layered DAG | Modular (varied) | Constraint-driven force layout | | Layout Type | Layered DAG | Modular (varied) | Constraint-driven force layout |
| Edge Labeling | ⚠️ Basic | ✅ Yes | ✅ Smart Placement | | Edge Labeling | ⚠️ Basic | ✅ Yes | ✅ Smart Placement |

View File

@@ -20,34 +20,13 @@ Before starting, ensure the following:
## 🔄 Step-by-Step Integration ## 🔄 Step-by-Step Integration
### 1. Clone the Mermaid Repository ### Refer [Mermaid Contributing Guide](/packages/mermaid/src/docs/community/contributing.md)
```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
```
--- ---
## 🧠 Implementing Your Custom Layout Algorithm ## 🧠 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: 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. > 📁 You can organize supporting files, utils, and types inside this folder.
### 5. Register the Layout Algorithm ### 2. Register the Layout Algorithm
Open the file: Open the file:
@@ -85,7 +64,7 @@ This tells Mermaid how to load your layout dynamically by name (`id`).
## 🧪 Testing Your Algorithm ## 🧪 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: To visually test your layout implementation, create a test HTML file in:
@@ -121,7 +100,7 @@ Inside the file, load your diagram like this:
</html> </html>
``` ```
### 7. Open in Browser ### 4. Open in Browser
After running `pnpm dev`, open your test in the browser: After running `pnpm dev`, open your test in the browser:

View File

@@ -108,7 +108,7 @@ IPSep-CoLa is ideal for:
## 🔍 Comparison Table ## 🔍 Comparison Table
| Feature | Dagre | ELK | IPSep-CoLa (Upcoming) | | Feature | Dagre | ELK | IPSep-CoLa |
| ------------------------- | ----------- | ------------------- | ------------------------------ | | ------------------------- | ----------- | ------------------- | ------------------------------ |
| Layout Type | Layered DAG | Modular (varied) | Constraint-driven force layout | | Layout Type | Layered DAG | Modular (varied) | Constraint-driven force layout |
| Edge Labeling | ⚠️ Basic | ✅ Yes | ✅ Smart Placement | | Edge Labeling | ⚠️ Basic | ✅ Yes | ✅ Smart Placement |

View File

@@ -20,15 +20,15 @@ export async function adjustLayout(
} }
} }
data4Layout.edges.forEach((edge) => { for (const edge of data4Layout.edges) {
insertEdge( insertEdge(
groups.edgePaths, groups.edgePaths,
{ ...edge }, edge,
{}, {},
data4Layout.type, data4Layout.type,
edge.start, edge.start,
edge.end, edge.end,
data4Layout.diagramId data4Layout.diagramId
); );
}); }
} }

View File

@@ -72,6 +72,12 @@ interface BaseNode {
defaultWidth?: number; defaultWidth?: number;
imageAspectRatio?: number; imageAspectRatio?: number;
constraint?: 'on' | 'off'; 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 { export interface ClusterNode extends BaseNode {
shape?: ClusterShapeID; shape?: ClusterShapeID;
isGroup: true; isGroup: true;
isEdgeLabel?: boolean;
edgeStart?: string;
edgeEnd?: string;
layer?: number;
order?: number;
isDummy?: boolean;
} }
export interface NonClusterNode extends BaseNode { export interface NonClusterNode extends BaseNode {
shape?: ShapeID; shape?: ShapeID;
isGroup: false; isGroup: false;
isEdgeLabel?: boolean;
edgeStart?: string;
edgeEnd?: string;
layer?: number;
order?: number;
isDummy?: boolean;
} }
// Common properties for any node in the system // Common properties for any node in the system