My main diagramming tool is Microsoft Visio, but I also use Excalidraw and AsciiFlow when "sketching" rough ideas. Of course this can never be perfect (see also: halting problem), but I think a minimum-effort solution would cover 80% of cases, and most of the rest could be covered if attached to a debugger that records traces. If a language server supports identifying function calls and "jump to definition" (xref), it already has a lazy graph of the code structure, so it's a matter of running a path finding algorithm on it. It would make it much easier to refresh the diagram the next time I need it for reference. Querypuml -type=fromto -from=Foo.cpp:123 -to=Bar.cpp:456 \ That time when I spent a whole day building a sequence diagram by hand, to document how a certain subsystem is created and used in the very heart of the application, paid for itself very quickly - but I'd much prefer if it was a matter of couple minutes of tuning an invocation like: As I mentioned yesterday, I find myself in need of being able to answer questions like "How does the code get from here to there?", and at least some language servers should have enough information to be able to give that answer. Quite honestly, I'm surprised I haven't seen anyone doing a generalized "Language Server -> PlantUML" tool for asking questions about the codebase and getting responses in graphical form. I might get around to doing that at some point. In that latter case, I've discovered that my "PlantUML notes" follow the code structure close enough that I should be able to coax my editor into generating these for me, semi-interactively. My main use cases are a) when I'm toying with some higher-level design in my head and want to "see it" in picture form, and b) when making notes about the structure of code as I explore gnarly areas of a legacy codebase. I mostly use PlantUML for myself, in lieu of drawing diagrams by hand (or pointing device). Yup, mostly the same set of PlantUML diagrams for me, plus: You can find some uses-cases of those diagrams here (. I try to follow UML, but I don't care about machine readability and prefer readability over UML compliance. I use them to model simplified class diagrams for documentation purposes, to model data flows, to create primitive mockups, to show the relationship between UI components (as embedded screenshots) and to show component dependencies. Especially as PRs changing the code structure can include diagram changes at the same time. After moving diagrams closer to code, I noticed that it is much easier to keep them in sync with the code base. There is also an extension for IntelliJ and the diagrams work nicely in github readme files. Since I created a drawio integration extension for VS Code, I tend to create much more diagrams during coding, as they are really cheap to create. Note: Labels can include new lines for a cleaner layout.I use drawio, as those diagrams are quite future proof (drawio is open source, very old and you can embed diagrams in svg files) but also very expressive (you can even use latex inside drawio diagrams). Open these example Mermaid diagrams in draw.io. Look at the examples below to see how the Mermaid syntax is used to define a variety of diagrams in text. Mermaid documentation for the complete syntax and styling options Shape styles You can choose different shapes, add labels to connectors, and style connectors and shapes. Mermaid syntaxĭiagrams are created by linking text labels using arrow connectors. You can make changes to the code here, then click Apply to update the diagram on the drawing canvas. To see the Mermaid code for any of the diagrams inserted in this way, select the shape, then press Enter. Your diagram will be automatically created and formatted from your text, and inserted as a single shape on the drawing canvas. Paste your text into the text box, then click Insert.Alternatively, click the + icon in the toolbar, then select Advanced > Mermaid. Click Arrange > Insert > Advanced > Mermaid.After documenting them in the Markdown-based text description, you can then insert this into the draw.io editor to generate a diagram and lay it out automatically. Many developers prefer to describe their data structures and processes using text, avoiding the need to context switch. With Mermaid’s Markdown-inspired syntax, you can generate flow charts, UML diagrams, pie charts, Gantt charts, and more. Mermaid is a syntax similar to Markdown where you can use text to describe and automatically generate diagrams.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |