Skip to content

docs: add a page to highlight demo and examples #602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tbouffard merged 4 commits into from
Dec 18, 2024
Merged

docs: add a page to highlight demo and examples #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
64ff8c7
docs: add a page to highlight demo and examples
tbouffard Dec 17, 2024
e0a058a
integrate coderabbitai feedback
tbouffard Dec 17, 2024
e3c9480
improve paragraph layout
tbouffard Dec 18, 2024
daea63a
fix link in README
tbouffard Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,20 +137,22 @@ Documentation to be migrated:


## Examples
<!-- copied into packages/website/docs/demo-and-examples.md -->

For more complete examples than getting started,, please have a look at:
For more comprehensive examples than the “Getting started” example, here is a list of demos and examples to help you understand how to use `maxGraph` and integrate it into your projects.

Note that they are based on `maxGraph` features, which require the use of [CSS and images](packages/website/docs/usage/css-and-images.md) provided in the npm package.

- the [storybook stories](packages/html/stories) which demonstrates various features of maxGraph.
- The stories are currently written in `JavaScript` and will be progressively migrated to `TypeScript`.
- A live instance is available on the [maxGraph webiste](https://maxgraph.github.io/maxGraph/demo).
- A live instance is available on the [maxGraph website](https://maxgraph.github.io/maxGraph/demo).
- the [ts-example](packages/ts-example) project/application that demonstrates how to define and use custom `Shapes` with `maxGraph`. It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).
- the [ts-example-without-defaults](packages/ts-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).
- the [js-example](packages/js-example) project/application that demonstrates how import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webapck](https://webpack.js.org/).
- the [js-example-without-defaults](packages/js-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webapck](https://webpack.js.org/).
- the https://github.com/maxGraph/maxgraph-integration-examples repository which shows how to integrate `maxGraph` with different frameworks and build tools.

- the [js-example](packages/js-example) project/application that demonstrates how to import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).
- the [js-example-without-defaults](packages/js-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).
- the [maxgraph-integration-examples](https://github.com/maxGraph/maxgraph-integration-examples) repository which shows how to integrate `maxGraph` with different frameworks and build tools.

Notice that some elements produced by `maxGraph` require to use [CSS and images](packages/website/docs/usage/css-and-images.md) provided in the npm package.
<!-- END OF 'copied into packages/website/docs/demo-and-examples.md' -->


## <a id="migrate-from-mxgraph"></a> Migrating from mxGraph
Expand Down
28 changes: 28 additions & 0 deletions packages/website/docs/demo-and-examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
sidebar_position: 2
---

# Demos and Examples
[//]: # (extract of <rootdir>/README.md)
For more comprehensive examples than the [“Getting started” example](./manual/getting-started.md), this page provides a list of demos and examples to help you understand how to use `maxGraph` and integrate it into your projects.

Note that they are based on `maxGraph` features, which require the use of [CSS and images](./usage/css-and-images.md) provided in the npm package.


## Interactive Demos
- the [storybook stories](https://github.com/maxGraph/maxGraph/tree/main/packages/html/stories) demonstrates various features of maxGraph.
- The stories are currently written in `JavaScript` and will be progressively migrated to `TypeScript`.
- A live instance is available on the [maxGraph website](https://maxgraph.github.io/maxGraph/demo).

## TypeScript Examples
- the [ts-example](https://github.com/maxGraph/maxGraph/tree/main/packages/ts-example) project/application demonstrates how to define and use custom `Shapes` with `maxGraph`. It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).
- the [ts-example-without-defaults](https://github.com/maxGraph/maxGraph/tree/main/packages/ts-example-without-defaults) project/application demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).

## JavaScript Examples
- the [js-example](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example) project/application demonstrates how to import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).
- the [js-example-without-defaults](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example-without-defaults) project/application demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).

## Framework Integration and Bundlers
- the [maxgraph-integration-examples](https://github.com/maxGraph/maxgraph-integration-examples) repository which shows how to integrate `maxGraph` with different frameworks and build tools.

[//]: # (END OF 'extract of <rootdir>/README.md')
2 changes: 1 addition & 1 deletion packages/website/docs/development/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"label": "Development",
"position": 3,
"position": 13,
"link": {
"type": "generated-index",
"description": "Everything you need to know when you are developing maxGraph."
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/known-issues.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 10
sidebar_position: 20
---

# Known Issues
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/manual/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"label": "Manual",
"position": 1,
"position": 11,
"link": {
"type": "generated-index",
"description": "An introduction to the concepts used in maxGraph."
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/usage/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"label": "Usage",
"position": 2,
"position": 12,
"link": {
"type": "generated-index",
"description": "Everything you need to know to use specific features of maxGraph."
Expand Down