---
title: Classic Example
order: 11
---

## Classic Example

Simple graph and diagram using G6 to make, such as Mindmap, Sankey Diagram and etc. If you have good idea with example, welcome to provide to us through github issue.

### Visualization Decision

This is a interactive graph visualization which asisits users to find out an appropriate visualization method for their usage. The demo is combined with lots of features of G6, including custom node, custom edge, force directed layout, data change, interactions, and so on. It is applied on homepage of AntV.

### Custom flow graph

As the demo below, to satisfy such a highly customized requirments, users can custom nodes and edges by themself.

### Sankey Diagram

A sankey diagram is a visualization used to depict a flow from one set of values to another. The things being connected are called nodes and the connections are called links. Sankeys are best used when you want to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths through a set of stages (for instance, Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site).

### Mindmap

A mind map is a diagram used to visually organize information. A mind map is hierarchical and shows relationships among pieces of the whole.

This case contains a series of interaction of mind map, including adding, removing, changing title.

### Entity Relationship Diagram

Entity–relationship diagrams don't show single entities or single instances of relations. Rather, they show entity sets (all entities of the same entity type) and relationship sets (all relationships of the same relationship type).

This case contains scroll intereaction for a single g6 node and multi sub-edge for nodes.


### Collapse/Expand Cluster

This demo shows interactively collapse and expand clusters with Fruchterman layout.

Try to click a node to collapse and expand the corresponding cluster.
