mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-17 06:20:07 +02:00
Resolved comments on pr of ipsep-cola
This commit is contained in:
@@ -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)
|
||||||
|
@@ -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:
|
||||||
|
|
||||||
|
@@ -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 |
|
||||||
|
@@ -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:
|
||||||
|
|
||||||
|
@@ -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 |
|
||||||
|
@@ -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
|
||||||
);
|
);
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
@@ -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
|
||||||
|
Reference in New Issue
Block a user