Architecture Diagram Detailed Classification
Process Type
Graphical expression
Mind Type
Structured expression
Note Type
Efficient expression
Treemap
Bracket Diagram
Default Mode
Supports real-time multi-user co-creation with shareable links for instant information transfer
Automatically generates graphics from text input and applies style enhancements
Prebuilt themes with full customization for personalized designs
Supports icons, images, labels, LaTeX formulas, code blocks, links, attachments and more
Export: PNG, VISIO, PDF, SVG | Import: VISIO, Mermaid
Real-time cloud storage, multi-device sync, version history, and secure data protection
The functional architecture diagram represents the required functions, like the parts needed for a car engine, with each function being a part. Information architecture is a guide for assembling the parts, similar to an engine assembly manual.
The product structure diagram encompasses the product's functions and information, and can also indicate the logical transition relationships between functions in the diagram. It can be simply expressed with a formula: Product Structure Diagram = Product Functional Structure Diagram + Product Information Architecture Diagram.
1. During competitive product analysis, drawing an information architecture diagram is needed to quickly understand the functional modules and interface design structure of competing products.
2. When building a product from scratch, a clear information architecture is a necessary prerequisite.
3. When taking over the daily iteration work of a product, one should first understand the position and importance of the business and functional points in the product architecture.
1. Determine key primary nodes according to the overall structure
2. First draw the information architecture diagram of a single primary node module, then improve each one
3. If a page appears in different primary nodes, it should be clearly marked
An information architecture diagram includes a lot of content, generally including: content structure (information classification, labels, themes), page structure (page or interface nodes), hierarchical relationships (primary, secondary, tertiary information), navigation relationships (transitions and paths between pages), user roles, and access entry (optional), etc.
Product managers, information architects, interaction designers, and front-end engineers all need to refer to it. It is one of the core deliverables connecting business logic and interface design.
No, it does not include UI design details. The information architecture diagram is a structural diagram, not involving visual or interaction details. UI design diagrams refine the interface style based on it.
The information architecture diagram first determines the page and content structure, then wireframes (layout sketches) are drawn based on it, and finally, prototypes (including interaction flow) are created.
