{"id":13588558,"url":"https://github.com/maxGraph/maxGraph","last_synced_at":"2025-04-08T06:32:19.497Z","repository":{"id":36957758,"uuid":"312287063","full_name":"maxGraph/maxGraph","owner":"maxGraph","description":"maxGraph is a fully client side JavaScript diagramming library","archived":false,"fork":true,"pushed_at":"2024-10-29T18:19:16.000Z","size":187318,"stargazers_count":818,"open_issues_count":39,"forks_count":171,"subscribers_count":29,"default_branch":"main","last_synced_at":"2024-10-29T20:26:01.117Z","etag":null,"topics":["browser","canvas","diagram","graph","hacktoberfest","svg","typescript"],"latest_commit_sha":null,"homepage":"https://maxgraph.github.io/maxGraph/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"jgraph/mxgraph","license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxGraph.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null}},"created_at":"2020-11-12T13:36:18.000Z","updated_at":"2024-10-29T18:19:49.000Z","dependencies_parsed_at":"2023-02-18T09:31:30.026Z","dependency_job_id":null,"html_url":"https://github.com/maxGraph/maxGraph","commit_stats":{"total_commits":549,"total_committers":42,"mean_commits":"13.071428571428571","dds":0.7395264116575593,"last_synced_commit":"d33769fad5e6c2ee1dd216939e07deb4745381b7"},"previous_names":[],"tags_count":124,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxGraph%2FmaxGraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxGraph%2FmaxGraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxGraph%2FmaxGraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxGraph%2FmaxGraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxGraph","download_url":"https://codeload.github.com/maxGraph/maxGraph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792100,"owners_count":20996877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","canvas","diagram","graph","hacktoberfest","svg","typescript"],"created_at":"2024-08-01T15:06:47.368Z","updated_at":"2025-04-08T06:32:14.485Z","avatar_url":"https://github.com/maxGraph.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Graph Drawing Library"],"sub_categories":[],"readme":"# maxGraph\n\n[![npm version](https://img.shields.io/npm/v/@maxgraph/core?color=blue\u0026style=flat)](https://www.npmjs.com/package/@maxgraph/core)\n[![build status](https://github.com/maxGraph/maxGraph/workflows/Build/badge.svg)](https://github.com/maxGraph/maxGraph/actions/workflows/build.yml)\n\n\u003c!-- copied into packages/core/README.md and packages/website/docs/intro.md --\u003e\n`maxGraph` is a TypeScript library which can display and allow interaction with vector diagrams. At a high level, it provides: \n- **Nodes**, also known as **vertices** which are typically represented by shapes like rectangles.\n- **Edges** which can be lines and arrows which normally point between one node and another.\n\nIt provides many of the diagramming features which would be expected by a piece of presentation software like Microsoft® PowerPoint™\nor LibreOffice® Impress such as being able to resize, move or rotate nodes, but has a stronger focus on automatic layout\nalgorithms and applications of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory). It is suited towards software\nwhich requires finer-grained customization of functionality than off-the-shelf packages.\n\u003c!-- END OF 'copied into packages/core/README.md and packages/website/docs/intro.md' --\u003e\n\n\nThe `maxGraph` library uses no third-party software, it requires no plugins and can be integrated in virtually any framework (it's vanilla JS).\n\n`maxGraph` is the successor of [mxGraph](https://github.com/jgraph/mxgraph) which is now end of life.\nAt first, it provides the same features as `mxGraph` and adds\n- TypeScript support\n- maintained npm package\n- modern modular, tree shakable, version of `mxGraph` to reduce the whole package size\n\nNew features will follow.\n\n\n## Browser support\n\nChrome, Edge, Firefox, Safari, Chromium based browsers (Brave, Opera, ....) for mobile and desktop.\n\n## Project status\n\n`maxGraph` is currently under active development, with a few adjustments still required to match the behavior of `mxGraph`.\nIn the meantime, new features are also being added to enrich the library.\n\nPlease try it in your application and [submit an issue](https://github.com/maxGraph/maxGraph/issues) if you think that something is not working.\n\nYou can also test `maxGraph` by running the [Storybook examples](#development) or [build the npm package locally](#build-local-npm-package) to get the latest changes.\n\n## Install\n\nInstall the latest version of `maxGraph` from the [npm registry](https://www.npmjs.com/package/@maxgraph/core).\n\nnpm\n```\nnpm install @maxgraph/core\n```\n\nyarn\n```\nyarn add @maxgraph/core\n```\n\npnpm\n```\npnpm add @maxgraph/core\n```\n\n## Getting Started\n\nHere is an example that shows how to display a rectangle connected to an orange circle.\n\nThis example assumes that\n- you are building an application that includes the maxGraph dependency, and it has been installed as explained above.\n- your application uses a build tool or a bundler for its packaging. Direct usage of `maxGraph` in a web page is not supported (for more details, see [#462](https://github.com/maxGraph/maxGraph/discussions/462)).\n- your application includes a page that defines an element with the id `graph-container`.\n- you want to use `TypeScript`, adapt it if you want to use `JavaScript` (mainly, remove references to the 'type' syntax).\n\n```typescript\nimport {type CellStyle, Graph, InternalEvent} from '@maxgraph/core';\n\nconst container = \u003cHTMLElement\u003edocument.getElementById('graph-container');\n// Disables the built-in context menu\nInternalEvent.disableContextMenu(container);\n\nconst graph = new Graph(container);\ngraph.setPanning(true); // Use mouse right button for panning\n// Gets the default parent for inserting new cells. This\n// is normally the first child of the root (ie. layer 0).\nconst parent = graph.getDefaultParent();\n\n// Adds cells to the model in a single step\ngraph.batchUpdate(() =\u003e {\n  const vertex01 = graph.insertVertex({\n    parent,\n    position: [10, 10],\n    size: [100, 100],\n    value: 'rectangle',\n  });\n  const vertex02 = graph.insertVertex({\n    parent,\n    position: [350, 90],\n    size: [50, 50],\n    style: {\n      fillColor: 'orange',\n      shape: 'ellipse',\n      verticalAlign: 'top',\n      verticalLabelPosition: 'bottom',\n    },\n    value: 'ellipse',\n  });\n  graph.insertEdge({\n    parent,\n    source: vertex01,\n    target: vertex02,\n    value: 'edge',\n    style: {\n      edgeStyle: 'orthogonalEdgeStyle',\n      rounded: true,\n    },\n  });\n});\n```\n\nYou will see something like in the following _maxGraph panning_ demo:\n\n![maxGraph panning demo](docs/images/maxgraph_demo.gif \"maxGraph panning demo\")\n\n\n## Documentation\n\nThe maxGraph documentation is available on the [maxGraph website](https://maxgraph.github.io/maxGraph).\n\n\u003e [!WARNING]  \n\u003e This is a **work in progress**, the content of the original _mxGraph_ documentation will be progressively migrated there.\n\u003e For more details, see [#345](https://github.com/maxGraph/maxGraph/issues/345).\n\nDocumentation partially migrated:\n- https://maxgraph.github.io/maxGraph/docs/manual/\n\nDocumentation to be migrated:\n- https://jgraph.github.io/mxgraph/docs/tutorial.html\n \n\u003e Be aware that the maxGraph API doesn't fully match the mxGraph API (see the paragraph below about \"[Migrating from mxGraph](#migrate-from-mxgraph)\").\n\n\n## Examples\n\nFor more complete examples than getting started,, please have a look at:\n\n- the [storybook stories](packages/html/stories) which demonstrates various features of maxGraph.\n  - The stories are currently written in `JavaScript` and will be progressively migrated to `TypeScript`.\n  - A live instance is available on the [maxGraph webiste](https://maxgraph.github.io/maxGraph/demo).\n- 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/).\n- 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/).\n- 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/).\n- 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/).\n- the https://github.com/maxGraph/maxgraph-integration-examples repository which shows how to integrate `maxGraph` with different frameworks and build tools.\n\n\nNotice 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.\n\n\n## \u003ca id=\"migrate-from-mxgraph\"\u003e\u003c/a\u003e Migrating from mxGraph\n\n`maxGraph` APIs are not fully compatible with `mxGraph` APIs. The concepts are the same, so experienced `mxGraph` users should be able to switch from `mxGraph` to `maxGraph` without issues.\n\nFor a complete guide, see the [dedicated migration page](packages/website/docs/usage/migrate-from-mxgraph.md).\n\n\n## TypeScript support\n\n`maxGraph` is written in TypeScript and provides type definitions so `maxGraph` can be easily integrated into TypeScript applications.\n\n`maxGraph` requires **TypeScript 3.8** or greater.\n\n\n## Support\n\nFor usage question, please open a new [discussion](https://github.com/maxGraph/maxGraph/discussions/categories/q-a) on GitHub. You can also use\n[GitHub discussions](https://github.com/maxGraph/maxGraph/discussions) for other topics like `maxGraph` development or to get the latest news.\n\n\n## History\n\nOn 2020-11-09, the development on `mxGraph` stopped and `mxGraph` became effectively end of life.\n\nOn 2020-11-12, a fork of the `mxGraph` was created with a call to Contributors.\n\n\u003e 12 Nov 2020.\n\u003e \n\u003e If you are interested in becoming a maintainer of mxGraph please comment on issue [#1](https://github.com/maxGraph/maxGraph/issues/1)\n\u003e \n\u003e Initial objectives:\n\u003e \n\u003e - The first priority is to maintain a working version of mxGraph and its **npm package**\n\u003e - The ambitious stretch goal is to refactor the codebase to create a modern modular, tree shakable, version of mxGraph to reduce the whole package size.\n\u003e \n\u003e -- Colin Claverie\n\nThe project was then [renamed on 2021-06-02](https://github.com/maxGraph/maxGraph/discussions/47) into `maxGraph` due to [licensing issue](https://github.com/maxGraph/maxGraph/discussions/23).\n\nStarting from the `mxGraph` 4.2.2 release, we\n- moved code to ES9\n- removed Internet Explorer specific code\n- migrated to TypeScript, based on the work initiated in [typed-mxgraph](https://github.com/typed-mxgraph/typed-mxgraph)\n- migrated the examples to [Storybook](https://storybook.js.org/)\n\n\n## Development\n\n### Clean former mxGraph tags\n\nEnsure you don't have the former `mxGraph` tags locally (see [#92](https://github.com/maxGraph/maxGraph/issues/92) fore more details):\n```\ngit fetch --all --tags --prune\n```\n\n### Setting up local development environment\n\nNodeJS requirements:\n- use the version declared in [.nvmrc](./.nvmrc). Other versions may work but are not supported.\n- this is the version used by GitHub Actions\n- nvm users can run `nvm use`. If the Node version is not installed, nvm will state how to install the required version.\n\nNote: maxGraph relies on npm workspaces to build.\n\nIn the project root directory, execute\n\n```sh\n$ npm install\n```\n\nTo watch the core package, execute:\n\n```sh\n$ npm run dev -w packages/core\n```\n\nTo watch the examples provided as [Storybook](https://storybook.js.org/) stories, execute:\n\n```sh\n$ npm run dev -w packages/html\n```\n\nSince both commands are in watch mode, so it's recommended to open two terminals and run them separately. When a file is saved from the core package, the html storybook will be automatically updated.\n\nFor more details about `@maxgraph/html`, see the README that explains the [maxGraph examples](./packages/html/README.md).\n\n### \u003ca id=\"build-local-npm-package\"\u003e\u003c/a\u003e Building the npm package locally\n\n**Reminder**: the released version are available at [npmjs](https://www.npmjs.com/package/@maxgraph/core). \n\nRun\n- from the project root: `npm install`\n- then, from the `packages/core` folder: `npm pack`\n\nThe `packages/core` folder or the generated `packages/core/maxgraph-core-***.tgz` file are now ready for use in your application, using [npm link](https://docs.npmjs.com/cli/v8/commands/npm-link) or `npm install`.\n\nExamples of use can be found in the [maxgraph-integration-examples](https://github.com/maxGraph/maxgraph-integration-examples) repository.\n\n### Release\n\nSee the dedicated [release](packages/website/docs/development/release.md) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FmaxGraph%2FmaxGraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FmaxGraph%2FmaxGraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FmaxGraph%2FmaxGraph/lists"}