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 5d341d66c5d20d4a["📄 Specifications.md"]
2c269288950887aa["D3.js Containment Tree Specification"];
class 2c269288950887aa default;
click 2c269288950887aa "Specifications.html#d3js-containment-tree-specification";
ac8ced009233741a["HTML Branding Specification"];
class ac8ced009233741a default;
click ac8ced009233741a "Specifications.html#html-branding-specification";
32592aed4644ac95["HTML Export Pipeline Specification"];
class 32592aed4644ac95 default;
click 32592aed4644ac95 "Specifications.html#html-export-pipeline-specification";
1c6c804d67bc741e["HTML Navigation Bar Specification"];
class 1c6c804d67bc741e default;
click 1c6c804d67bc741e "Specifications.html#html-navigation-bar-specification";
945adb3f0ea1012e["Web Interface Style Specification"];
class 945adb3f0ea1012e default;
click 945adb3f0ea1012e "Specifications.html#web-interface-style-specification";
end
end
D3.js Containment Tree Specification
Specification for the D3.js interactive containment tree visualization.
Details
The containment page (containment.html) shall display an interactive D3.js collapsible tree showing the containment hierarchy:
- Root node representing the model root
- Folder nodes that can be expanded/collapsed
- File nodes containing element children
- Element nodes with type-specific icons and colors
- Attachment nodes as children of elements (element and file attachments)
- Clickable elements that navigate to their definitions
- Expand All / Collapse All buttons for tree control
The containment view serves as the primary entry point for HTML documentation, providing an interactive visual overview of the model structure.
Metadata
Relations
HTML Branding Specification
Specification for Reqvire branding elements in HTML export.
Details
Logo and Branding:
- The navigation bar shall display the Reqvire logo on the left side before the navigation links
- A favicon shall be included for browser tab identification
- Apple touch icons shall be included for mobile device support
- All brand assets shall be exported to an assets folder during HTML export
HTML Design:
The system shall design and implement HTML pages with consistent layout, styling, and navigation for browsing the System model.
Metadata
Relations
HTML Export Pipeline Specification
Technical specification for HTML export generation pipeline.
Details
Working Directory Setup:
- Create temporary working directory (e.g., in /tmp)
- Generate markdown files from registry with full relations (user-created and auto-generated inverse relations)
- Copy all related system elements (following satisfiedBy and other relations)
- Copy all attachment files to temporary directory preserving structure
Generation Pipeline (in temporary directory):
Execute all generation commands treating temporary directory as repository root:
- Generate all Mermaid diagrams in markdown files
- Generate index.md (interactive D3.js tree showing containment hierarchy - main entry point)
- Generate model.md (model-centric visualization with nested relations from root requirements)
- Generate traces.md (verification upward traceability)
- Generate coverage.md (verification coverage report)
HTML Conversion:
- Convert all markdown files to HTML with embedded styles
- Process Mermaid diagrams for web rendering
- Convert internal .md links to .html links
- Preserve directory structure
Output:
- Accept optional
--output option to specify output directory
- When
--output is not specified, export to a temporary directory and print the path
- When
--output is specified, create output folder if not existing
- Copy generated HTML and all artifacts from temp directory to output directory
- Clean up temporary working directory (except when output is temp directory)
Source Protection:
- Never modify original repository files
- All generation happens in isolated temporary directory
Git Directory Exclusion:
- The .git directory shall never be exported to the output folder
- This prevents internal git metadata from polluting the exported documentation
Export Related System Elements:
- Ensure that any related system elements are also copied into output folder to ensure consistency of exported model
Metadata
Relations
HTML Navigation Bar Specification
Specification for the fixed navigation bar in HTML pages.
Details
The system shall provide a fixed navigation bar in all HTML pages with links to key model artifacts for easy access.
The navigation bar must include (left to right):
- Containment: Link to containment.html (interactive D3.js tree - main entry point)
- Model: Link to model.html (model-centric view with nested relations)
- Traces: Link to traces.html (verification upward traceability report)
- Coverage: Link to coverage.html (verification coverage report)
The navigation bar must be:
- Always visible (fixed position) while scrolling
- Consistent across all HTML pages
- Clearly visible and accessible
Metadata
Relations
Web Interface Style Specification
Styling conventions for HTML export web interface.
Details
Page Layout:
- Navigation bar at top with links to views
- Content area with responsive width
- Sidebar for element tree (optional)
Typography:
- System font stack for readability
- Monospace for code and identifiers
- Heading hierarchy matches markdown levels
Color Palette (MONO Theme):
The web interface uses a monochrome grayscale theme for consistent, professional appearance.
| Usage | Color | Notes |
|---|
| Navigation background | #1c1c1c | Dark gray for main nav bar |
| Navigation hover | #2a2a2a | Subtle highlight on hover |
| Primary/Buttons | #333333 | Lighter gray for interactive elements |
| Primary hover | #4a4a4a | Button hover state |
| Page background | #FAFAFA | Light gray page background |
| Content background | #FFFFFF | White content cards |
| Text primary | #212121 | Dark gray for headings |
| Text secondary | #424242 | Medium gray for body text |
| Text muted | #757575 | Light gray for secondary info |
| Links | #4a4a4a | Grayscale links |
| Borders | #EEEEEE | Light borders |
| Highlight | #d0d0d0 | Selection/highlight color |
Element Cards:
| Element Type | Border Color | Background |
|---|
| Requirement | #0066FF | #D0E0FF |
| User-requirement | #0066FF | #D0E0FF |
| Verification | #CC9900 | #FFF7B3 |
| Behavior | #9900CC | #E0D0FF |
| Specification | #009900 | #DFFFD0 |
| Constraint | #CC0000 | #FFD0D0 |
Navigation:
- Breadcrumb trail for element hierarchy
- Clickable relation links
- Collapsible sections for long content
Metadata
Relations