Elements
graph TD;
%% REQVIRE-AUTOGENERATED-DIAGRAM
%% Graph styling
classDef userRequirement fill:#D1C4E9,stroke:#7E57C2,stroke-width:2px;
classDef systemRequirement fill:#E1D8EE,stroke:#673AB7,stroke-width:1.5px;
classDef verification fill:#DCEDC8,stroke:#4CAF50,stroke-width:2px;
classDef folder fill:#FAFAFA,stroke:#9E9E9E,stroke-width:3px;
classDef file fill:#FFF8E1,stroke:#FFCA28,stroke-width:2px;
classDef default fill:#F5F5F5,stroke:#424242,stroke-width:1.5px;
subgraph 46bd8996ef832bd8["📁 requirements/Interfaces/WebInterface"]
subgraph c7d31f0c38cfb0c5["📄 HTMLGeneration.md"]
fa0ecb1299582ab["Component-Based HTML Architecture"];
class fa0ecb1299582ab systemRequirement;
click fa0ecb1299582ab "HTMLGeneration.html#component-based-html-architecture";
ac6971954304c571["CSS Framework Integration"];
class ac6971954304c571 systemRequirement;
click ac6971954304c571 "HTMLGeneration.html#css-framework-integration";
bb0ee0a283e500e8["Mobile-Friendly Documentation"];
class bb0ee0a283e500e8 userRequirement;
click bb0ee0a283e500e8 "HTMLGeneration.html#mobile-friendly-documentation";
4e47e768f2a254cb["Responsive HTML Generation"];
class 4e47e768f2a254cb systemRequirement;
click 4e47e768f2a254cb "HTMLGeneration.html#responsive-html-generation";
f5edec5aaf14290d["Type-Safe HTML Generation"];
class f5edec5aaf14290d systemRequirement;
click f5edec5aaf14290d "HTMLGeneration.html#type-safe-html-generation";
end
end
subgraph 7b06d045a68fb066["📁 requirements/Interfaces/WebInterface/Verifications"]
subgraph 1002260922c26344["📄 HTMLGenerationVerifications.md"]
cd4d13fa425c5ad["Component Reuse Verification"];
class cd4d13fa425c5ad verification;
click cd4d13fa425c5ad "Verifications/HTMLGenerationVerifications.html#component-reuse-verification";
73786e8c37d9673f["HTML Validity Verification"];
class 73786e8c37d9673f verification;
click 73786e8c37d9673f "Verifications/HTMLGenerationVerifications.html#html-validity-verification";
79ec057500b741e["Integration Test Verification"];
class 79ec057500b741e verification;
click 79ec057500b741e "Verifications/HTMLGenerationVerifications.html#integration-test-verification";
3d80dd755086873a["Mobile Responsiveness Verification"];
class 3d80dd755086873a verification;
click 3d80dd755086873a "Verifications/HTMLGenerationVerifications.html#mobile-responsiveness-verification";
6c8b966ffd2cffc4["Responsive Design Verification"];
class 6c8b966ffd2cffc4 verification;
click 6c8b966ffd2cffc4 "Verifications/HTMLGenerationVerifications.html#responsive-design-verification";
end
end
fa0ecb1299582ab -.->|verifiedBy| cd4d13fa425c5ad;
fa0ecb1299582ab -.->|verifiedBy| 79ec057500b741e;
ac6971954304c571 -.->|verifiedBy| 6c8b966ffd2cffc4;
bb0ee0a283e500e8 -.->|deriveReqT| fa0ecb1299582ab;
bb0ee0a283e500e8 -.->|deriveReqT| 4e47e768f2a254cb;
bb0ee0a283e500e8 -.->|deriveReqT| f5edec5aaf14290d;
bb0ee0a283e500e8 -.->|verifiedBy| 3d80dd755086873a;
4e47e768f2a254cb -.->|deriveReqT| ac6971954304c571;
4e47e768f2a254cb -.->|verifiedBy| 79ec057500b741e;
4e47e768f2a254cb -.->|verifiedBy| 3d80dd755086873a;
4e47e768f2a254cb -.->|verifiedBy| 6c8b966ffd2cffc4;
f5edec5aaf14290d -.->|verifiedBy| 73786e8c37d9673f;
effc979c2c2475cf["test.sh"];
class effc979c2c2475cf default;
click effc979c2c2475cf "../../../tests/test-html-generation/test.sh";
79ec057500b741e -->|satisfiedBy| effc979c2c2475cf;
6c8b966ffd2cffc4 -->|satisfiedBy| effc979c2c2475cf;
3d80dd755086873a -->|satisfiedBy| effc979c2c2475cf;
73786e8c37d9673f -->|satisfiedBy| effc979c2c2475cf;
Mobile-Friendly Documentation
The system shall provide mobile-friendly HTML documentation accessible on smartphones and tablets.
Metadata
Relations
Component-Based HTML Architecture
The system shall use component-based architecture for HTML generation to eliminate duplication and improve maintainability.
Details
The HTML generation system shall be organized into reusable components:
Shared components:
- Navigation menu (with mobile/desktop variants)
- Page header with metadata
- Footer
- Mobile menu toggle
Reusable layouts:
- Base layout for standard pages
- Diagram layout for full-height visualizations
Page-specific modules:
- Index/Containment page
- Model view page
- Traces page
- TraceFlow page
- Coverage page
- Resources page
- Individual specification pages
Each component shall be defined once and reused across all generated pages to eliminate code duplication.
Metadata
Relations
Responsive HTML Generation
The system shall generate HTML documentation with responsive design supporting desktop, tablet, and mobile viewports.
Details
The system shall:
- Support viewport widths from 320px (mobile) to 1920px+ (desktop)
- Use mobile-first CSS approach with progressive enhancement
- Provide hamburger navigation menu for screens < 768px
- Scale typography and spacing based on viewport size using responsive breakpoints
Responsive breakpoints:
- sm: 640px and up (small tablets)
- md: 768px and up (tablets)
- lg: 1024px and up (desktops)
- xl: 1280px and up (large desktops)
Metadata
Relations
CSS Framework Integration
The system shall integrate Tailwind CSS utility framework for consistent responsive styling.
Details
The system shall:
- Include Tailwind CSS via CDN for development
- Use mobile-first utility classes for responsive design
- Apply responsive breakpoints (sm, md, lg, xl) for layout adaptation
- Define custom theme colors for Reqvire branding:
- Primary: Indigo (#3F51B5)
- Requirement: Deep Purple (#673AB7)
- Verification: Emerald Green (#4CAF50)
Tailwind provides:
- Utility-first CSS for rapid development
- Built-in responsive modifiers (e.g.,
md:hidden, lg:flex)
- Consistent spacing, colors, and typography scale
- Small bundle size with tree-shaking capability
Metadata
Relations
Type-Safe HTML Generation
The system shall generate HTML using type-safe Rust macros to prevent invalid HTML at compile time.
Details
The system shall:
- Use Maud crate for compile-time HTML generation
- Validate HTML structure at compile time through Rust’s type system
- Prevent malformed HTML tags, unclosed elements, and invalid nesting
- Generate well-formed HTML5 output conforming to W3C standards
This ensures HTML validity errors are caught during compilation rather than at runtime or by users.
Metadata
Relations