mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-05 00:29:48 +03:00
draw.io integration #525
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @Kdecherf on GitHub (Dec 16, 2017).
Originally assigned to: @ssddanbrown on GitHub.
Desired Feature:
We deployed bookstack at current job for writing technical documentation about our platforms. Because it's better with a diagram, especially when you deploy µservices-oriented platforms, we try to add diagrams using draw.io to our pages to have a better view of interactions. Our current workflow for achieving that is:
Writers must manually share their draw.io sources (xml) in order to contribute to them.
It could be awesome to integrate draw.io to bookstack editor and save xml sources as editable attachments.
@Abijeet commented on GitHub (Dec 16, 2017):
I would be interested in this too. Some more info - https://about.draw.io/integrate-draw-io/
@ssddanbrown commented on GitHub (Dec 16, 2017):
@Kdecherf Thanks for the suggestion. I agree this would have great benefit and saves us having to build-in and maintain a custom diagram editor.
@Abijeet Thanks for the docs link. Integration is much simpler than I would have originally thought.
I've had a quick go and almost have it fully integrated into the WYSWIYG editor although TinyMCE is being a pain. I'll continue with this soon hence why I've assigned myself.
I've had a quick look and can't see any license issues or payment required to add draw.io integration. My only slight concern is that their current revenue source is solely dependant on confluence integration. Hopefully we're too small-scale to be a concern to that but we need to keep it in mind.
@p0lp0 commented on GitHub (Dec 22, 2017):
I use draw.io this way as well, and it would save me a lot of time.
@aljawaid commented on GitHub (Dec 22, 2017):
I have also used draw.io for some diagrams for the business. I usually use draw.io from within my nextcloud setup on the same domain. Integration would be wicked.
The only reason I don't like to use the main draw.io (I prefer the nextcloud integrated version) is because the social media links/code seem to bloat the confluence integration that I have no use for. Also, as it is within nextcloud, I can save my diagram direct into my business cloud.
Integrating draw.io into Bookstack would be excellent. So we could draw the diagram, save the xml (maybe even export it direct to owncloud/nextcloud) and then insert it into one of the books.
Very much look forward to this.
@ssddanbrown commented on GitHub (Jan 28, 2018):
Base integration now complete as part of #632, Ready for next release therefore will close this request.
@AbijeetP commented on GitHub (Mar 1, 2018):
@ssddanbrown - Just deployed this at my workplace today, and they are all very happy about this. Thank you.
@davidjgraph commented on GitHub (Oct 15, 2018):
"My only slight concern is that their current revenue source is solely dependent on confluence integration. Hopefully we're too small-scale to be a concern to that but we need to keep it in mind."
Slightly late, but I have responsibility for all things commercial in draw.io. I'm very happy to see this integration and would gladly see an open source project completely replace Confluence, mainly because it's performance and usability. We'll always find a way to make money and we'll always take the side of open source over closed.
@ssddanbrown commented on GitHub (Oct 15, 2018):
@davidjgraph That's great to hear, thanks for providing some peace-of-mind.
@parthmern commented on GitHub (Mar 5, 2024):
how can i get XML data ? please tell me guys please
const handleExport = () => {
// Check if the ref to the Canvas component exists
if (canvasRef.current) {
// Send export action with desired format (e.g., xmlsvg)
canvasRef.current.exportDiagram({ format: 'xml' });
}
};
<DrawIoEmbed
xml = ""
ref={canvasRef}
// Event handler to receive exported data
onExport={(data) => setExportedData(data.data)}
/>
// output
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxNTFweCIgaGVpZ2h0PSIxMjFweCIgdmlld0JveD0iLTAuNSAtMC41IDE1MSAxMjEiPjxkZWZzLz48Zz48Zz48cGF0aCBkPSJNIDExMCAwIEwgMTUwIDQwIEwgMTEwIDgwIEwgNzAgNDAgWiIgZmlsbD0icmdiKDI1NSwgMjU1LCAyNTUpIiBzdHJva2U9InJnYigwLCAwLCAwKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PC9nPjxnPjxlbGxpcHNlIGN4PSI2MCIgY3k9IjgwIiByeD0iNjAiIHJ5PSI0MCIgZmlsbD0icmdiKDI1NSwgMjU1LCAyNTUpIiBzdHJva2U9InJnYigwLCAwLCAwKSIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjwvZz48L2c+PC9zdmc+
how can i convert this in XML