{"id":17776585,"url":"https://github.com/jirilojda/integration-diagrams-net","last_synced_at":"2025-09-11T04:45:25.193Z","repository":{"id":152699334,"uuid":"614436263","full_name":"JiriLojda/integration-diagrams-net","owner":"JiriLojda","description":"Kontent.ai and diagrams.net integration","archived":false,"fork":false,"pushed_at":"2024-07-13T07:25:32.000Z","size":8185,"stargazers_count":2,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T17:12:59.432Z","etag":null,"topics":["diagramsnet","drawio","drawio-tools","hacktoberfest","kontent-ai","kontent-ai-integration"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JiriLojda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-15T15:23:59.000Z","updated_at":"2023-10-27T10:51:53.000Z","dependencies_parsed_at":"2024-04-22T10:45:10.596Z","dependency_job_id":"c368ac6c-cbc2-467a-a006-a68b2109b220","html_url":"https://github.com/JiriLojda/integration-diagrams-net","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":"kontent-ai/custom-element-starter-react","purl":"pkg:github/JiriLojda/integration-diagrams-net","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JiriLojda%2Fintegration-diagrams-net","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JiriLojda%2Fintegration-diagrams-net/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JiriLojda%2Fintegration-diagrams-net/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JiriLojda%2Fintegration-diagrams-net/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JiriLojda","download_url":"https://codeload.github.com/JiriLojda/integration-diagrams-net/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JiriLojda%2Fintegration-diagrams-net/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274578520,"owners_count":25310958,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["diagramsnet","drawio","drawio-tools","hacktoberfest","kontent-ai","kontent-ai-integration"],"created_at":"2024-10-26T22:06:13.964Z","updated_at":"2025-09-11T04:45:25.150Z","avatar_url":"https://github.com/JiriLojda.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n\n[![Discord][discord-shield]][discord-url]\n\n\n# Kontent.ai integration with diagrams.net\n\nThis integration contains a [custom element](https://kontent.ai/learn/tutorials/develop-apps/integrate/content-editing-extensions/) that you can use in Kontent.ai to create and edit diagrams in diagrams.net directly from the Kontent.ai app.\nThe custom element stores the created diagram in the `xml` format and a data url to use it on your site.\n\n![demo-gif](docs/demo.gif)\n\n# Getting Started\n\nThe integration is created with [Create React App](https://create-react-app.dev/). \n\nFirst you will need to install npm dependencies with `npm install`. \nThen use `npm run build` to build the integration or `npm run start` to start a local development server. \nSee https://create-react-app.dev/docs/available-scripts for more scripts.\n\nYou can also provide a [configuration](#Configuration) to the element, but it is entirely optional.\n\n\u003e The diagrams.net editor is opened in a new tab so that you have enough space for your diagram.\n\u003e Changes in the editor are auto-saved to Kontent.ai.\n\u003e However, if you leave the item editing or switch to a different content group in the Kontent.ai tab, the connection breaks and further changes to the diagram won't be saved.\n\n## Configuration\n\nYou can provide an optional configuration. See the example bellow.\nhttps://github.com/JiriLojda/integration-diagrams-net/blob/71cf868d33f32633380fae35f1260f802a0c5c1b/src/constants/readmeSnippets.ts#L3-L22\n\n## Deploy\n\nTo use the custom element you need to deploy it.\n\nNetlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it and leave you with a copy of the repository in your account as well.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/JiriLojda/integration-diagrams-net)\n\n\u003e The repository has the [continuous delivery configuration](./.github/workflows/deploy.yml) using GitHub Actions being triggered by the new release and releasing to `gh-pages` branch. This setup is used for internal purposes. If you want to use the custom element, the recommended way is to fork the repository, make a code review, and deploy the repository on your own.\n\n## Saved value\n\nThis is an example of a value saved in the custom element that can be used on your site. Keep in mind that it is serialized into string.\nhttps://github.com/JiriLojda/integration-diagrams-net/blob/71cf868d33f32633380fae35f1260f802a0c5c1b/src/constants/readmeSnippets.ts#L24-L31\n\n# Known Issues\n\n## Value is too large for Kontent.ai with a custom font used in the diagram.\n\nWhen using the `\"previewImageFormat\": { \"format\": \"svg\" }` and a custom font in the diagram, diagrams.net includes the whole font in the data-url for preview.\nThis makes it (and the value as the data-url is saved as well) too large.\nTo avoid the problem, you can do one of the following:\n* Set `\"previewImageFormat\": { \"format\": \"png\" }` in your configuration. PNG's don't have this problem, but are usually bigger and don't scale so the SVG is the default.\n* Make the integration replace the custom font in the SVG with your font's url. You will need to provide the url in the configuration. Please, keep in mind that SVGs with links to external sources won't load the source in the `\u003cimg /\u003e` tag. You will need to use the `\u003cobject /\u003e` tag to display such an SVG.\n```jsonc\n{\n  \"previewImageFormat\": { \n    \"format\": \"svg\",\n    \"customFont\": {\n      \"customFontConfigType\": \"nameAndUrl\",\n      \"fontName\": \"\u003cyour font name\u003e\",\n      \"fontUrl\": \"\u003cyour font url\u003e\"\n    }\n  },\n  // or\n  \"previewImageFormat\": { \n    \"format\": \"svg\"\n    \"customFont\": {\n      \"customFontConfigType\": \"fontFaceDefinition\",\n      \"fontFaceDefinition\": \"@font-face { font-name: 'your-font-name'; src: 'your-font-url'; }\" // this allows more flexibility, you can have multiple @font-face definitions and custom font-face properties\n    }\n  }\n}\n```\n\n# Contributing\n\nFor Contributing please see  [`CONTRIBUTING.md`](CONTRIBUTING.md) for more information.\n\n# License\n\nDistributed under the MIT License. See [`LICENSE.md`](./LICENSE.md) for more information.\n\n\n[contributors-shield]: https://img.shields.io/github/contributors/JiriLojda/integration-diagrams-net.svg?style=for-the-badge\n[contributors-url]: https://github.com/JiriLojda/integration-diagrams-net/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/JiriLojda/integration-diagrams-net.svg?style=for-the-badge\n[forks-url]: https://github.com/JiriLojda/integration-diagrams-net/network/members\n[stars-shield]: https://img.shields.io/github/stars/JiriLojda/integration-diagrams-net.svg?style=for-the-badge\n[stars-url]: https://github.com/JiriLojda/integration-diagrams-net/stargazers\n[issues-shield]: https://img.shields.io/github/issues/JiriLojda/integration-diagrams-net.svg?style=for-the-badge\n[issues-url]:https://github.com/JiriLojda/integration-diagrams-net/issues\n[license-shield]: https://img.shields.io/github/license/JiriLojda/integration-diagrams-net.svg?style=for-the-badge\n[license-url]:https://github.com/JiriLojda/integration-diagrams-net/blob/master/LICENSE.md\n[discord-shield]: https://img.shields.io/discord/821885171984891914?color=%237289DA\u0026label=Kontent.ai%20Discord\u0026logo=discord\u0026style=for-the-badge\n[discord-url]: https://discord.com/invite/SKCxwPtevJ\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjirilojda%2Fintegration-diagrams-net","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjirilojda%2Fintegration-diagrams-net","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjirilojda%2Fintegration-diagrams-net/lists"}