This article explains how to create clear software architecture diagrams by defining architecture concepts, outlining the 4+1 and C4 view models, and offering practical guidance on choosing the right diagram type and audience to ensure effective communication and consistent, self‑describing designs.
This tutorial introduces PlantUML, explains its core features, shows how to install plugins for popular IDEs, and provides detailed syntax examples for participants, messages, lifelines, activation bars, groups, notes, and colors, culminating in a complete login flow diagram.
This article demonstrates how to use the text‑based Mermaid tool to create a variety of diagrams—from flowcharts for making breakfast to network packet charts—illustrating practical, everyday applications of visualisation with clear code examples and explanations.
This tutorial walks you through using the free online diagramming tool Diagrams (draw.io), covering how to launch the editor, navigate its interface, and leverage its menu bar, toolbar, shape library, canvas, style panel, and page controls to create professional flowcharts and diagrams.
The article introduces the free, web‑based diagramming tool Diagrams (draw.io) as an accessible alternative to Visio and ProcessOn, explains how to launch it, choose storage, and use its menu bar, toolbar, shape palette, canvas, style panel, and bottom bar, and shows renaming, file‑type changes, and multi‑page organization for creating flowcharts, mind maps, and other diagrams without installing software.
This article introduces PlantUML, explains its text‑based diagramming approach, walks through quick setup, IDE plugins, core sequence‑diagram syntax—including participants, message types, lifelines, activation bars, grouping, notes, and color customization—while providing complete code examples and best‑practice tips.
This guide introduces Visual Studio Code and walks through three popular diagramming extensions—Draw.io Integration, Excalidraw, and tldraw—explaining their features, installation steps, file formats, and how to use them directly within VSCode to streamline visual documentation.
This article explains why programmers should switch from Keynote to the hand‑drawn style tool Excalidraw, showcases various diagram types it can create, walks through its interface and font settings, and even provides a custom deployment with better Chinese font support.
This guide explains why diagrams are essential for technical articles, introduces draw.io as a free, cloud‑backed diagramming tool, demonstrates basic shapes, advanced combinations, image hosting options, and also recommends mind‑mapping and code‑screenshot utilities for clearer communication.
This article introduces six free online diagramming tools—Excalidraw, Zen Flowchart, Visual Paradigm Online, draw.io, Liuchengtu, and ProcessOn—detailing their key features, collaboration capabilities, and how they help engineers quickly create flowcharts, mind maps, UML, and other visual documents.
This guide introduces six free, web‑based diagramming tools—including Excalidraw, Zen Flowchart, Visual Paradigm Online, draw.io, Liuchengtu, and ProcessOn—highlighting their key features, collaboration capabilities, and URLs so engineers can quickly choose the right visual solution for their projects.
This article introduces several free, easy‑to‑use diagramming tools—including Excalidraw, Zen Flowchart, Visual Paradigm Online, draw.io, Liuchengtu, and ProcessOn—highlighting their key features, collaboration capabilities, and where to access them.
This guide walks you through the reasons for using draw.io, provides direct download links, explains step‑by‑step Windows installation, demonstrates basic usage and panel navigation, and also covers alternative installation methods and the online version of the diagramming tool.
This guide explains why diagrams are essential for technical articles, introduces draw.io as a free, GitHub‑backed tool, walks through its interface, basic shapes, advanced combinations, and also recommends complementary tools like XMind and carbon.now.sh for mind‑maps and code screenshots.
This article provides a concise overview of several widely used diagramming tools—including Excalidraw, draw.io, Yuque, Xmind, Carbon, and ProcessOn—detailing their features, templates, collaboration options, and where to access them online.
This article introduces a practical methodology for creating effective software architecture diagrams, explains the purpose and classification of various diagram types—including context, container, component, and code diagrams—offers guidelines for audience‑centric design, and showcases the C4 model with real‑world examples and tool recommendations.
This article introduces several popular diagramming tools—including Excalidraw, draw.io, Yuque, XMind, Carbon, and ProcessOn—detailing their main capabilities, templates, export options, collaboration features, and where to access them online.
This article introduces four convenient online utilities—hexed.it for hexadecimal editing, text2image for converting text to images, Carbon for turning code snippets into stylish pictures, and draw.io for creating diagrams—highlighting their features, usage tips, and practical applications for developers.
This guide introduces a curated set of diagramming, documentation, IDE, and terminal tools—including draw.io, uTools, PlantUML, IntelliJ IDEA, XMind, mdnice, GitBook, MobaXterm, and JuiceSSH—to help backend developers create design docs and diagrams more efficiently and securely.
This guide introduces four free web‑based utilities—hexed.it for quick hex editing, text2image for converting text into images, Carbon for turning code snippets into stylish pictures, and draw.io for creating professional diagrams—highlighting their key features, interfaces, and practical use cases for developers.
This article introduces the free online diagramming tool Diagrams (also known as draw.io), explains how to access its web interface, and provides a detailed walkthrough of its UI components—including the menu bar, toolbar, shape library, canvas, style panel, and bottom navigation—so readers can efficiently create and manage flowcharts.
This article introduces the free online diagramming tool Diagrams (draw.io), covering its features, how to access the interface, and detailed walkthrough of menus, toolbars, shape libraries, canvas, style panel, and page management, helping users create professional flowcharts efficiently.
This guide explains how to install the PlantUML plugin and Graphviz, configure environment variables and IntelliJ IDEA, and use PlantUML to quickly create UML diagrams and flowcharts directly within the IDE, including a sample code snippet and alternative browser options.
This article presents a practical methodology for creating clear, effective software architecture diagrams, explaining fundamental concepts, various view types such as context, container, component, and class diagrams, and offering tips on audience targeting, common pitfalls, and tool recommendations to improve communication among stakeholders.
This guide introduces PlantUML, an open‑source text‑based UML tool, shows how to install its IntelliJ IDEA plugin, and provides step‑by‑step examples for creating sequence, use‑case, class, activity, and mind‑map diagrams, highlighting key syntax and the efficiency of code‑driven diagramming.
This article explains why clear architecture diagrams are essential, defines key concepts, outlines the 4+1 view classification, shares best‑practice criteria for good diagrams, addresses common pitfalls, and introduces the C4 modeling approach with examples and tool recommendations.
This article explains the purpose and methodology of drawing software architecture diagrams, introduces the 4+1 view and C4 models, describes each diagram type, shares common pitfalls, and provides practical tips and tool recommendations to help engineers communicate system designs effectively.
This article explains the essence of software architecture, its core elements, why clear diagrams are crucial for communication and quality, and presents practical principles, patterns like UML, 4+1, C4, arc42, and tools such as draw.io and PlantUML to help engineers create accurate, consistent, and maintainable architectural documentation.
The article explains why architects need to master mind maps, UML diagrams (class, sequence, activity, state) and architecture diagrams, outlines key principles for each, provides concrete examples and visual illustrations, and shares practical insights on using these diagrams to improve design communication and business alignment.
This tutorial provides a detailed walkthrough of ProcessOn, covering flowchart creation, mind‑mapping, template usage, collaboration features, file organization, pricing plans, and additional highlights, enabling users to efficiently produce and share architectural diagrams and other visual assets.
This article explains the Manhattan routing algorithm used for automatic orthogonal connection routing in diagram tools, discusses its origins, references useful libraries like draw2d, and provides a full TypeScript implementation with code examples and practical application scenarios.
This article explains the purpose and types of software architecture diagrams, introduces the C4 modeling approach, highlights common pitfalls, and offers a step‑by‑step methodology to create clear, self‑describing diagrams that effectively communicate system structure to the right audience.
This article explains what BPMN (Business Process Model and Notation) is, its purposes, core symbols, and provides step‑by‑step instructions for drawing BPMN diagrams using dedicated software, helping both technical and non‑technical stakeholders visualize and communicate business processes effectively.
This guide shows how to install the Draw.io Integration extension in VSCode, create a .drawio file, design flowcharts within the editor, load additional symbols, and export the diagram in various formats without leaving the IDE.
This guide explains what PlantUML is, why it’s useful for fast diagram creation, how to install the required Graphviz engine, set up the PlantUML plugin in IntelliJ IDEA, create UML files, and includes sample code for sequence diagrams and role definitions.
This guide explains why architecture diagrams matter, introduces the C4 modeling method, shows how to use C4PlantUML with PlantUML to create context, container, component, and code‑level diagrams, and provides step‑by‑step instructions and example code for practical implementation.
This article explains why clear architecture diagrams are essential for effective communication, outlines common pitfalls when drawing them, defines architecture and its diagram types, introduces the C4 modeling approach, and provides concrete examples and best‑practice tips to create self‑describing, audience‑focused diagrams.
Clear, layered software architecture diagrams prevent misunderstandings, and the C4 model—covering Context, Container, Component, and Code levels—offers a simple, universal language for visualizing static system structures, guiding teams from high‑level overviews to detailed code maps across diverse audiences.
The article explains why software architects need to create clear diagrams, describes the problems they solve, lists nine typical diagram types—including use case, robustness, mind map, DFD, flowchart, class, state, E‑R, and sequence diagrams—with their appropriate scenarios, advantages, and drawbacks, and outlines a step‑by‑step workflow for applying them in real projects.
This article explains why developers should incorporate diagramming into their workflow, outlines three key uses—understanding problems, facilitating team communication, and merging ideas—reviews various media from pen‑and‑paper to code‑generated charts, and offers practical tips for creating clear, effective diagrams.
This article introduces three key macOS tools—Dash for documentation, MindNode for mind mapping, and OmniGraffle for diagramming—explaining their core features, usage tips, and how they can boost a developer's productivity, followed by a curated list of additional handy utilities.
