These New Features Make The Best Diagramming Tool "Diagrams.net" Even Better!

tom here from lauren systems and probably the most popular question i get is any time i've done a diagram is what diagram software are you using to draw that or what's the best or best free diagram software out there and the answer is all the same for the last well maybe a year and a half or longer i have been using diagrams.net and it's pretty outstanding i don't remember who turned me on to it but it's a great product i have a more in-depth tutorial than what i'm going to show you today that i'll leave link to below to get you started with it but it works as a web page that you don't need to sign up for you can use it all inside the browser or you can tie it to your g suite account and collaborate in real time or you can tie it to your next cloud and do real-time collaboration and all kinds of file storage on there you can also integrate it with office 365 or atlassian and if none of those things make you happy you can also download it as a desktop application for windows linux or mac still free and if you really feel advanced and you just want to wall it off and self-host it well they got an option for that too in docker so there's a lot of different ways you can play around with diagrams.net hands down highly recommend it what i'm here to talk about today is since i did that tutorial well about a year and a half ago there's a lot more features that have been added and i want to talk about a couple of the highlights and where you can read more about it and we're going to start right at their blog their blog is a great resource because there's just so many features that they are constantly rolling out that well i don't always use or have a need for but maybe you do features integrations use cases news other open source new templates being added they're all nice and categorized here for you to scroll through i it's a great resource if you're just curious what else it can do maybe beyond some of the use cases you may have or that i've had and showcased on this channel the first exciting option to add that i really like but it's simple and a little bit hidden is flow animations i see a little bit hidden because when you create a connector between two shapes the styling is all over here but there's an extended property you have to get to to see the flow animation but you just check it the full animation goes from the shape it started at to the shape it was destined to there's not a way to reverse that flow there's not a control on speed of the flow it just animates exactly like you see here you just turn it on or off but turning it on or off doesn't change any of the other styling options for the particular shape so you can still color it theme it modify it otherwise but yeah it gives it a cool little flow animation the next big change is more shapes this is sometimes a good and bad thing because it creates some indecision for so many shapes to choose from but it's great having these if i wanted to build out something with active directory or maybe android or atlassian or bootstrap we have a lot of different types of icons i can use in here they even have rack icons so you could use this to build out your rack designs and your network and start putting them in there and it's great having all of this on here and we'll hit apply and now we have this mess over here but don't worry this is a mess but an easy one to solve because they have a search right here to make it quick to find anything that you added there so we're gonna hit rack more results we can type uh azure and get some of the azure icons and then start dragging them over so there's a windows icon for there there's a bit bucket and uh what else we on azure okay now you start dragging these and going these are the shapes i want to use to start building out my graph what do i do with all of that this is where things are also clever with the scratch pad we can drag these back onto the scratch pad and that does include things that are already filled out so this says firewall with an ip address attached to it if we drag it to the scratch pad here we create a new page and we drag that same firewall over here the scratch pad remembers anything you draw over there to be able to reproduce it it goes a step further you can edit the scratch pad you can import images and import full other draw.i o files and we've actually imported two in here if you mouse over them i have this one here and i have this one here i can actually take this file and it's a complete draw dio matter of fact this is one file i opened and it imports both pages as separate piece as the scratch pad so i can start with and leave those in the drawer i o really makes it easy when you're wanting to duplicate a lot of things start getting it started maybe you have a template you want that you want to start as a base you can add it to your scratch pad or when as i said you're doing any one particular job you just drag the ones you want in there and then just edit the scratch pad if you don't want them in there and say i probably don't need those and i probably don't want that one in there because the scratch pad does persist even when you start a new document now the next major change is themes we're going to go in here to extras we have the default theme we have a minimal theme atlas and dark dark mode is a complete theme change so we're going to switch it to dark now this does require closing and relaunching the application and we'll do the sketch theme last so we're going to go ahead and close it and now we've launched this with the dark theme the problem is this is not 100 compatible with certain things such as when you go new and create new diagrams some diagrams may not look very good with the dark theme it requires a little bit of styling on there and of course any existing ones you did if you did custom coloring and that coloring doesn't high contrast across there it may not work very well but hey that's just time to retheme and redo those particular documents now the next thing i want to talk about it's kind of a theme or different mode i would say is sketch mode and sketch mode still takes a restart to switch to this mode but sketch mode lets us switch between dark and light themes so here's sketch mode on a light theme and we can say you know in sketch mode and drag different icons over and you can see it lets us sketch things out in a pretty simple kind of fun way now what makes this pretty cool is because the dark mode it's dark mode aware so this is go swish dark mode and look it switched the theme of this as well so i didn't have to make any special color changes provided i used all the icon sets that are compatible with sketch which is quite a few of them but some of the icons may not show up quite as well and so when you're going through the shapes you may run into some issues if it wasn't a sketch mode and you were trying to add text to it but pretty neat that it does this now let's go a step further with sketch mode and it makes it easy to theme the entire sketch so we're going to go here to style and you can change the different themes they have in here to some really weird and hideous themed colors some are nice maybe some are not nice and some are harder to read but i like the way this makes it very simple to do and if you create something in sketch mode and set these themes like something as ugly as this we'll choose this one here that's hard to read and we're going to go ahead and save it switch back to the default theme and it's still editable in this version as well and you can go back and change the formatting again in a style and everything so you can still you know it's still as ugly as it was before you can still switch it so anything created in sketch mode still works but now when we drag things into normal mode everything's back in normal so you can go back and forth between these and it's pretty fluid i like the way i can do something in sketch mode to get an idea maybe redraw it out here but hey it allows quite an element of fun when we're doing these and setting this up now maybe in the future i'll do another more in-depth video there's just so many features to cover inside of drawdio it's got all kinds of ways you can import text build things based on imported text in different languages it even has a way to import tables out of sql to understand them so you can start drawing relationships between different tables in the database there's an extensive amount of features available more than i'm covering in this particular video i encourage you to go through their blog to kind of see some of the cool features and maybe some things you want to use in there and of course i'll leave a link to my more in-depth tutorial where i dive a little deeper into getting started with it and some of the basics to get you going and start using it it's free it's easy to use i'll leave a link to their website link to their blog and link to my other video and thank you see you in the forums and thank you for making it to the end of this video if you enjoyed this content please give it a thumbs up if you'd like to see more content from this channel hit the subscribe button and the bell icon to hire a shared project head over to lawrences.com and click on the hire us button right at the top to help this channel out in other ways there is a join button here for youtube and a patreon page where your support is greatly appreciated for deals discounts and offers check out our affiliate links in the descriptions of all of our videos including a link to our shirt store where we have a wide variety of shirts and new designs come out well randomly so check back frequently and finally our forums forums.laurensystems.com is where you can have a more in-depth discussion about this video and other tech topics covered on this channel thank you again and we look forward to hearing from you in the meantime check out some of our other videos you

Channel: Lawrence Systems

Views: 48,097

Keywords: LawrenceSystems, diagrams.net, diagrams.net how to use, diagrams.net tutorial, diagrams.net flowchart, diagrams.net uml, diagrams.net line jumps, net force diagram, diagrams.net blog, network map, network mapper, network mapping tools, network diagram example, flow net diagrams

Id: mpF1i9sfEJ0

Length: 9min 7sec (547 seconds)

Published: Fri Nov 12 2021