 Tom here from Lauren's Systems. We're going to talk about diagrams.net, formerly known as draw.io. If you want to learn more about me and my company, head over to laurencesystems.com. If you want to hire a short project, there's a hires button up at the top. If you want to support this channel out in other ways, there's some affiliate links down below to get you deals and discounts on products and services we talk about on this channel. Check them out. There's quite a few links down there. Diagrams with anyone anywhere. I like that slogan. So they used to be called draw.io. They moved to diagrams.net. And I think there's some trouble with the I.O. domain. They've got some blog posts, but it's not real relevant. But if you want to dig into why they're changing your name, because it may matter to someone. What is really impressive is this creates really simple XML files that are very compatible with all the way back from 2005 version of this program. I remember trying it a long time ago and wasn't very impressed with it, but they have made so many feature changes. And I find it fascinating that even with all these feature changes, and this is a 100% open-source drawing program, they have also completely kept compatibility with even your old drawing files. This could be a pain with some drawing programs as the new version comes out and maybe or maybe not, they have 100% compatibility with previous drawings you did, which no one really likes redoing everything. So I thought that was kind of neat that they had that on a front page of the feature. It shows a commitment of 15 years of updating a program in the open-source world and allowing compatibility on there. And because these files, like I said, they're XML, so they're pretty manageable as far as the way they look and if you have to do any reading on them or digging into them. Share with everyone. Don't worry about licenses platforms. It just works. This is a huge feature because it just works is very important because a lot of times you're like, oh, I can't open this because you did it in this weird format and I don't have a license for this viewer or it's a version out. That problem goes away. It works in browser. It works inside of Windows, Mac, Linux, everything. So we'll cover that in a second. Powerful features. When we dive into exactly how it works, it's pretty amazing when you dive into all the feature lists and they have all these blog posts of features that are just go on for days. I don't have time. Maybe I'll do a longer tutorial, but they've been making blog posts for a year that you can try at all kinds of pretty neat things that it supports. Privacy first. This is a nice feature because even though it's browser-based, it is open-source. They're not sniffing your data. They're not doing anything special with it. They allow you to attach to either local files or whatever file choices you want, whether you want to store it in the cloud with many different cloud services being offered. It's pretty amazing the breadth of the services that they tie into. G Suite, Google Drive, SharePoint and OneDrive, Elassian, NextCloud, your standard desktop, Git and Dropbox. There's actually even more that they're not, they don't have all listed here, but if you dive into and go onto their page for the development, there's a plug-in for, well, all kinds of things, including Wikipedia, Wikimedia. There's a lot of integrations you can do and because it's open-source and very easy to embed, you can customize it very easily and you can completely self-host the web version. They even have options for that. Now, as far as downloading it goes, right here, if you go to download, you'll see that they have, currently we're at version 12.93 and we have a Windows installer, a Mac installer, a list of other services that you can use for Linux or if you want just an app image, RPM and even Google Chrome OS, they have a plug-in for that. So I thought that was kind of cool, but you don't need it. You can actually, with no plug-ins, just use it completely in the browser. So let's show first the browser version, which is exactly the same. That's a nice thing. There's no difference when you use it in the browser, other than, well, it's in the browser versus a desktop one and they have the option right here to get the desktop and I didn't have to create a login or anything. I can literally share a link with someone, no login, no asking for email addresses. The only thing is if I open existing diagram or save one, it'll ask me if I like to use one of the cloud storage features. So we're just going to ahead create new diagram. They have an amazing array of templates in here for cloud engineering templates for laying things out. We'll just open one up like this one right here and you can really quickly see it opens. It's fast. It's easy to use and let's close this little, I don't need the desktop version and editing is easy. We'll just change that. There, we built a relationship here to this and maybe one over here and your common keys like f2 renames things. So from an ease of use standpoint, you know, common keys, test, whoops, test two with, I can't spell very well, spell check works with f2. So easy to edit, easy to move things around. You can see it's like any other good well-made drawing program or diagramming program where you can build relationships between things, drag things around, edit those bars. Let's say we want to change it from sharp, let's do a curved one like this. So we create a curved one, we'll change the color, we'll change the to a dotted line and make it several points. There we go. That quickly, I was able to kind of modify and change things and then they're all related. So as the relationship is built on some of these in this template, didn't have that one related. Now they are, now they're tied together. Pretty easy to use. Dragging more things in. Well that's easy too. We can just go ahead and drag another object in and start building its relationship to there and it's got all the alignment tools and remember style settings. So we set the style so it says, hey, you must want that style use more places. So you can quickly edit this. There we go. But what if I wanted to send this someone? How hard is that? Well, that's where things get really easy. You just send them the draw file and we're going to call this our demo to demo, rename it and we're going to completely not use any cloud features where I could share. We're going to download a copy of this. So save as YouTube. Where do you want to save it on GitHub? You could have tied this to any one of these accounts, open it in a new window or just download it. So there's our YouTube demo.xml. Pretty straightforward. If I wanted to and let's go ahead and start another one, we'll go ahead and start now. We're still going to use this one here and create new diagram, blank, create and then I can always just go file, open from. Where do you want to pull it from? Just a URL device and open it up. So we can open up that YouTube demo. I think I saved under downloads. Yep, right there. And here it is a new browser with all the different changes. But what about if I wanted to open it locally? Well, that's easy enough too. We're going to go over here and I have the app image. So here it is running locally on my computer, open existing diagram. Go over here, go to downloads. There's our YouTube demo one and one and the same. Really straightforward to do. It works perfectly fine, whether it's local or not. And now I'm running a local copy. And like I said, this is cross compatible with all the major operating systems. But what about if we wanted to export this and embed it? That would be kind of cool, right? Well, it supports full HTML embedding. And the embedding is better than you think because it doesn't just go ahead and make it so it's ready. Let's go ahead and save this somewhere like my downloads folder, YouTube demo.html diagram YouTube demo.html. So we're going to head and save this. And now you can embed this into your web page. What does that actually do for you? We're actually going to show you firing up another browser. So we go right there is our diagram YouTube demo. We'll use Firefox, Firefox diagram demo. So what does it look like in a browser pulled from a local file? Well, there it is all embedded here. And it even has this little text that was added on there on the side. So it will produce a web page with your diagram on there. And of course, you can manipulate and embed this into whatever you want to even have WordPress plugins for this. But what if that person goes, I like this as a great template to start my idea, but I'd like to change it to customize it so they can click on it. They click the edit, it brings them back over to the diagrams.net or sometimes it does still link to draw.io. And now they can start editing this page right from there. So they went from a HTML file right into an editing. I'm really impressed that they have all this on here because now from a sharing standpoint and I plan to do more of my videos using this tool, you can now easily have a copy that I can embed into my website. And if you wanted to have the diagram I use for my demo, not only could you have it, you can have it and edit it when without even downloading anything, it'll launch you right to the site. And if for any reason the site ever goes away, it's easy enough to download and pull that out and have a local copy that you downloaded so you can run it locally. So I'm really impressed with the top to bottom of the features that it has on there. So let's talk a little bit more about some of the advanced features and we'll leave this page because I didn't save it so it gave me some warnings. So here's our YouTube demo. But let's dive into a couple things that it can do that are a little bit more advanced. And that's what I have these open over here. So let's close this window. We'll leave this untitled one open. We'll do it in a web browser here. We'll close this demo. We don't need that one. Insert from text to create tree and entity diagrams. So although it does have all these kind of basic features that you see me do and obviously we can go here and drag a box, drag another box, grab a decision box from your general. We can then go, all right, duplicate this box, create a relationship and then create a relationship to this box and then go here and create a relationship to this one. You know, the basic things, those all work fine. What about some of those real advanced ones? So we'll jump right into the fact that you can insert advanced from text, from mermaid, from sequel, from CSV, and we'll actually do one from text. And they have right here how to insert text. So we're actually going to create this right here. We'll copy their demo. And we don't like this list. We would turn this into a diagram. So as we did, you can pretty straightforward see this is not very advanced. And instantly we've created this to start building a relationship with the organization. So we can start remapping and moving all these objects around and rearranging how you want. But it just laid all that out. So if you have lists and CSV, the fact they'll do sequel is pretty impressive too. So you can, if you have your sequel code, like literally raw my sequel code, you can start dropping it in there and create relationships and start creating all the different tables to start mapping out your databases very quickly in this. Now, another one we'll show is threat modeling. Diagrams used in this host. What about threat modeling? Well, I was really impressed because they have an entire attack tree and everything. So if we open all these in diagram.net, now it just tied together each one of these sections built this in here. So we have collapsible numbers and everything else. And by the way, this is the HTML version of it that they have that you can embed. So if you're doing one of the demos, you can do this. And then it's the same premise supplies, click this. And now we edit. Now we're actually able to edit this. I'm, you know, really handy for doing this. Like I said, I plan to do more of my videos like this. So as I do these type of demos, and you can lay them out, and it's very quick to collaborate with someone on the same project going, Hey, I want to see it and be able to follow up. So let's start closing some of these and talk about one more advanced feature and we'll dive into something else that's interesting. So if you're not familiar with graph is it does support that as well. What graph is is the ability to make these. So we're going to go here, copy, go to our entitled one, and actually zoom out a little bit and delete what was in here. And the same thing we're going to insert advanced. And away we go. Now we've inserted these type of objects in there. And you can go through, you can edit the data set that built this. And if you're familiar with this particular language, this will very quickly do this. And by the way, some programs have outputs like this. So you can dynamically link this, build this on there. And like I said, maybe I'll do a few more advanced videos on some of the uses for this. But I wouldn't, I'm wondering what other auto integrations, maybe if someone has some links to suggest, they could leave them below or I have a discussion on forums on some of the integrations, maybe people have built with this, I started digging around, it looks like some people have built some pretty cool language integrations. So you can export data and start building this right up. So the last thing I want to cover inside of here, so as impressive as all these features are, and like I said, a list all here. So plant, uml, SQL, CSV, you have a lot of different options in here to build these. And by the way, they have all the demos. Here's what it looks like for the SQL demo, where you can just go in there and build it all out. Let's talk about the fact that it has a ton, go new, new diagram, we'll just go blank again, shapes in here. So Active Directory, Android, Atlassian, Bootstrap, there's a lot of them in here, easy enough to import more of them if you want. And I haven't really dove into creating any custom ones, but I haven't really found anything that's missing in here that I needed. So you have your classic Cisco One, Cisco Safe, Cumulus, even ones for Citrix. So anything you want to do, you can pretty much probably find in here. You just check some boxes. We'll check Office and that, Rack, Apply, and let's take a look at them. So they have Office Clouds, and these are some of the, like Microsoft Office Cloud stuff. It's so easy to drag these over here. So let's go Network. We do a lot of network ones. We could start with the cloud, right? That's where it all starts. Start building your servers. We have our gaming system over here. We have our firewalls can be the first thing. So we'll take our cloud, it's go ahead and make it this. We'll change the color over here. Cloud connects to the firewall. The firewall has one for gaming. And then we have our server over here. Pretty simple to start building and saving this and building it out. And then they have all the different options right down here. So also, if you're building database relationships, whichever one on here. Now, the rack mount stuff, I haven't found it to be overly impressive. They actually, you know, go here, we'll go new. We'll look at the templates again, create new diagram. They do have the ability to do some of these rack layouts. And it's neat, but it's not as good as I might hope on there. I don't know. I haven't really dove into this much, but I know a lot of people ask about doing rack diagrams. I've actually found my favorite way to do rack diagrams has been in spreadsheets, where you just line up all the columns of a spreadsheet to equal the rows on the racks and match the numbers. But they do have some ability to dive into and do this. Now you can zoom in pretty far. And they've really got a lot of these. So you can drag it out of the rack, but they've got the rack numbers on this. But it's so cool that you can build it as a template. And they've got a full stack, half stack, quarter stack here, to start diving into it and laying things out and putting it on there. And of course, you can always import images and things like that. That's completely doable. The other thing I wanted to point out and the reason I switched between different layouts is because when you do this, you notice here, it has these. When we're here, it has these. And we're here, it has these. It dynamically has no problem changing. And this is a problem I've seen with some of the other less advanced diagramming tools I use, where when you start a different layout for a different project, it doesn't remember all the other settings. You can set which shapes you want showing up for which projects. That way you're not constantly digging through a mess when you save it. So it does remember all those settings on there, which is really handy. There's also a lot of little data things like how this one created that. There's actually a lot of behind the scenes data that you can do where you edit the data, edit the linking that was allowed to create some of these. So it's pretty impressive just how well this all works together and all the different options they have. So if you have some resources you want to share with me on this, like I said, I'm really impressed with the program. It's how I plan to keep doing my drawings from here on out with my channel so I can make them easier to share and easier to do the demos. And then have you guys have the templates as well when I'm done. But if you have some other thoughts on this, I'd actually like to know because a few people said there's some other resources. If you can link them to me, actually the forum would probably be the best way to do so. I'm going to post this over in the forums at forums.learnsystems.com. Overall, this has been by far of all the drawing programs I use, even compared to some of the commercial ones I've used. Hands down, probably one of the best ones. It's easy. It's intuitive. It's very dynamic. The fact that you can even import data sets like SQL, the fact that you can even pull, even with the local one right from a URL, you could actually just drop the URL in and pull the data right in and start editing it right away. They've really thought of pretty much everything on here and it's open source community development project here. So definitely hats off to being one of really tight open source projects. By the way, also all my usage, I started redoing all of our internal documents with this. This is what led me to gaining a better understanding of it. I've not seen it even crash once. That is just crazy impressive to me. I have not seen it lock up in a browser, do anything weird. I don't have any quirks to tell you about. Oh yeah, if you accidentally drag these two things together, it does it. I'd file a bug report if it did, but so far our stability has been pretty amazing. Always save, always. I'm still a save all the time because you're putting a lot of effort and work into these, but stability has been top notch on it. So I'm also going to play further with some of the embedding options on here as well. I want to look at how I can integrate it into my website better if you're not familiar. If you go to our website, every one of the videos I do here is also a blog post. So I may go back, I don't know if I'll go back retroactively, but going forward, I may embed some of the more advanced charts and graphs and diagrams that I do right into my website and play with the WordPress blog and it's some more playing I want to do. But like I said, I'm looking for suggestions if you know where some other resources are. Someone said there was one for Unify to be able to have a shape set just for them. That would be kind of cool to check out. If you have links for that, I do appreciate it. I'm going to do some research myself and I may do some more follow-up videos and walk through how to do a few things more advanced in it. So as always, head over to forums.lawnsystems.com. If you want to continue discussion on it, it's way easier than trying to reply to YouTube comments. Sorry, people that always put YouTube comments. Sometimes YouTube doesn't make it as easy for me to follow up with them. I've ranted about that before and YouTube has done very a little to improve the commenting system. Plus, we can have a much richer, more engaging discussion over in the forums. All right, I obviously don't need too much of a link other than diagrams.net. Check it out. It's free. It's open source. Download it. Play with it. See what you think. Thanks. And thank you for making it to the end of the video. If you like this video, please give it a thumbs up. If you'd like to see more content from the channel, hit the subscribe button and hit the bell icon if you'd like YouTube to notify you when new videos come out. If you'd like to hire us, head over to lawnsystems.com. Fill out our contact page and let us know what we can help you with and what projects you'd like us to work together on. If you want to carry on the discussion, head over to forums.lawnsystems.com where we can carry on the discussion about this video, other videos, or other tech topics in general, even suggestions for new videos that are accepted right there on our forums, which are free. Also, if you'd like to help the channel in other ways, head over to our affiliate page. We have a lot of great tech offers for you. And once again, thanks for watching and see you next time.