# Extending DefaultLinkModel

## Extending the DefaultLinkModel

Much like extending nodes, custom links can also be created. In the below example, we have created a link that renders a circle animating from the source port to the target port.

![](/files/-Lm-wCyyL85uB1VGiD9O)

In this specific example, we extended the `DefaultLinkModel` because we wanted to retain a lot of the functionality that it provides in the base class:

```typescript
export class AdvancedLinkModel extends DefaultLinkModel {
    constructor() {
        super({
            type: 'advanced', // <-- here we give it a new type
            width: 10 // we specifically want this to also be width 10
        });
    }
}
```

Now we need to create a new link factory to tell the system how our new link model fits into the core system. We specifically are going to extend the `DefaultLinkFactory` because we still want to render a `DefaultLinkWidget`. The only difference is that we want each **path segment** to be a red line with an animating circle. Fortunately, the `DefaultLinkWidget` already uses the `generateLinkSegment()` method defined in the `DefaultLinkFactory` to accomplish this. The only thing we need to do, is provide a different type of segment:

```typescript
export class AdvancedLinkFactory extends DefaultLinkFactory {
    constructor() {
        super('advanced'); // <-- this matches with the link model above
    }

    generateModel(): AdvancedLinkModel {
        return new AdvancedLinkModel(); // <-- this is how we get new instances
    }

    /**
     * @override the DefaultLinkWidget makes use of this, and it normally renders that
     * familiar gray line, so in this case we simply make it return a new advanced segment.
     */
    generateLinkSegment(model: AdvancedLinkModel, selected: boolean, path: string) {
        return (
            <g>
                <AdvancedLinkSegment model={model} path={path} />
            </g>
        );
    }
}
```

The actual code for the `AdvancedLinkSegment` [can be found here](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-gallery/demos/demo-custom-link1) (it is in the `demo-custom-link1` folder in the demo gallery).

This is the easiest and most simple way to get started with custom links.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://projectstorm.gitbook.io/react-diagrams/customizing/extending-default-links.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.