Skip to content

Commit d23e234

Browse files
fix(docs): Update overview page
2 parents a491228 + 599edbd commit d23e234

File tree

1 file changed

+17
-18
lines changed

1 file changed

+17
-18
lines changed

packages/module/patternfly-docs/content/examples/AboutTopology.md

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,29 +27,29 @@ import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
2727

2828
import './topology-example.css';
2929

30-
# Introduction
31-
3230
**Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology).
3331

34-
PatternFly's **Topology** is an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them. Creating these visuals can help document and communicate the intricacies of the processes behind your product.
32+
PatternFly's **Topology** is an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that allows you to create a visual representation of complex application architectures. You can map applications, their build status, and the components and services associated with them. Creating these visuals helps document and communicate the intricacies of the processes behind your product.
33+
34+
To create a Topology view for your application, you can create a simple layout of nodes (data points) and connecting edges (relationships). Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your application.
3535

36-
To create a Topology view for your application, you can create a simple layout of nodes, which represents your data points, and connecting edges, which represent the relationships between nodes. Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your application.
36+
---
3737

38-
## Prerequisites
38+
## How do I use Topology?
3939

40-
To use Topology, you will need to have both [Node Active LTS](https://github.com/nodejs/Release#release-schedule) and [Yarn](https://yarnpkg.com/) installed.
40+
### Prerequisites
4141

42-
1. Install and develop with the most up-to-date version of Node Active LTS. For example, to develop with Node 8, you would use the following commands:
42+
1. Install and develop with the most up-to-date version of [Node Active LTS](https://github.com/nodejs/Release#release-schedule). For example, to develop with Node 8, you would use the following commands:
4343

4444
```
4545
nvm install 8
4646
nvm use 8
4747
```
48-
2. Install and use version 1.6.0 or later of Yarn.
48+
2. Install and use version 1.6.0 or later of [Yarn](https://yarnpkg.com/).
4949
50-
## Installing Topology
50+
### Get started
5151
52-
Once you have all of the prequisites, you can install the Topology package with Yarn or npm:
52+
Once you have all of the prerequisites, you can install the Topology package with Yarn or npm:
5353
5454
1. Using Yarn:
5555
@@ -62,9 +62,7 @@ Once you have all of the prequisites, you can install the Topology package with
6262
npm install @patternfly/react-topology --save
6363
```
6464
65-
## Initial setup and usage
66-
67-
To use Topology out of the box, follow these steps:
65+
Once installed, you must configure the data model and controller through the following steps:
6866
6967
1. First transform your back-end data into a [Model](https://github.com/patternfly/react-topology/blob/main/packages/module/src/types.ts) object. This will contain the information needed to display the nodes and edges in your Topology view. Each node and edge contains a set of properties used by Topology, as well as a data field, which Topology can be used to customize the nodes and edges.
7068
@@ -96,13 +94,14 @@ To use Topology out of the box, follow these steps:
9694
9795
1. Use `<VisualizationSurface>` to provide the SVG component required for your topology components. `<VisualizationSurface>` can take a state parameter, which enables you to pass your state settings to the controller.
9896
99-
## Demo app
97+
---
10098
101-
To help you better understand and visualize the different Topology components, we have created an interactive demo, [which is contained in the react-topology repository.](https://github.com/patternfly/react-topology/tree/main/packages/demo-app-ts)
99+
## Explore the demo application
102100
103-
You can run the demo app [by following these instructions.](https://github.com/patternfly/react-topology?tab=readme-ov-file#demo-app)
101+
To help you better understand and visualize the different Topology components, we have created an interactive demo, [which is contained in the react-topology repository](https://github.com/patternfly/react-topology/tree/main/packages/demo-app-ts).
104102
105-
### Example
103+
You can run the demo app [by following these instructions](https://github.com/patternfly/react-topology?tab=readme-ov-file#demo-app).
106104
105+
## Example
107106
```ts file='./TopologyGettingStartedDemo.tsx'
108-
```
107+
```

0 commit comments

Comments
 (0)