WifeFrame - StarUML Wireframe DSL Parser

Design → DSL → Spec → Code pipeline for AI-assisted development.

A Python tool that parses StarUML project files (.mdj) and produces:

• Structured DSL — Intermediate Representation for AI builders
• Semantic Markdown — Human-readable documentation
• Type-safe constraints — Validation rules extracted from wireframes

Quick Start

# Install (no dependencies - Python 3.7+ only)
git clone <repo>
cd WifeFrame

# Generate DSL from StarUML file
python wifeframe_dsl.py project.mdj output.json --md --pretty

# Output:
# → output.json (structured DSL for AI)
# → output.md (documentation for humans)

Features

• Dual Format Support: Works with both standard StarUML (UMLWF*) and Wireframe plugin (WF*View) widget types
• Metadata Extraction: Captures diagram name, parent module, and descriptions
• Element Mapping: Converts StarUML widgets into readable tables with type, label, position, and functional description
• Layout Analysis: Sorts elements by visual flow (top-to-bottom, left-to-right)
• Comprehensive Widget Support: Handles 60+ wireframe widget types

Supported Widget Types

Standard StarUML (UMLWF prefix)

Type	Description
UMLWFButton	Buttons
UMLWFTextField	Single-line text input
UMLWFTextArea	Multi-line text input
UMLWFLabel	Static text labels
UMLWFCheckBox	Checkboxes
UMLWFRadioButton	Radio buttons
UMLWFImage	Images
UMLWFPanel	Container panels
UMLWFWindow	Window/frame
UMLWFTextBox	Text Box
UMLWFLink	Hyperlinks
UMLWFTable	Data tables
UMLWFComboBox	Dropdown lists
UMLWFListBox	List boxes
UMLWFSlider	Sliders
UMLWFDatePicker	Date pickers
UMLWFNavigationBar	Navigation bars
UMLWFTabBar	Tab bars
UMLWFTreeView	Tree views
UMLWFMenu	Menus
UMLWFSearchBar	Search input
UMLWFSwitch	Toggle switches
UMLWFStepper	Stepper controls
UMLWFScrollView	Scrollable views
UMLWFWebView	Embedded web views

Wireframe Plugin (WF prefix)

Type	Description
WFButtonView	Buttons
WFTextView	Text labels
WFInputView	Text input fields
WFCheckboxView	Checkboxes
WFLinkView	Navigation links
WFWebFrameView	Web/mobile frames
WFDesktopFrameView	Desktop application frames
WFPanelView	Container panels
WFSeparatorView	Dividers/separators
WFAvatarView	User avatars
WFImageView	Images
WFTextAreaView	Multi-line text input
WFSelectView	Dropdown selects
WFRadioView	Radio buttons
WFTableView	Data tables
WFListView	List views
WFCardView	Card containers
WFHeaderView	Section headers
WFFooterView	Section footers
WFNavigationView	Navigation bars
WFTabView	Tab bars
WFProgressBarView	Progress bars
WFBadgeView	Status badges
WFTagView	Tags
WFAlertView	Alert dialogs
WFModalView	Modal dialogs
WFPopupView	Popups
WFDropdownView	Dropdown menus
WFAccordionView	Accordions
WFCarouselView	Image carousels
WFTimelineView	Timeline displays
WFChartView	Charts/graphs
WFCalendarView	Calendar widgets
WFMapView	Map displays
WFVideoView	Video players
WFAudioView	Audio players
WFFileView	File displays
WFFolderView	Folder displays
WFBreadcrumbView	Breadcrumb navigation
WFPaginationView	Pagination controls
WFSearchView	Search bars
WFFilterView	Filter controls
WFSortView	Sort controls
WFMenuView	Menu items
WFContextMenuView	Context menus
WFTooltipView	Tooltips
WFSpinnerView	Loading spinners
WFSwitchView	Toggle switches
WFSliderView	Sliders
WFStepperView	Steppers
WFRatingView	Rating stars
WFProgressBarCircularView	Circular progress bars
WFToggleButtonView	Toggle buttons
WFIconButtonView	Icon buttons
WFSplitView	Split panes
WFGroupBoxView	Group boxes
WFTabViewView	Tab views
WFScrollView	Scroll containers
WFCollectionView	Collection grids
WFGridView	Grid layouts
WFDataTableView	Data tables
WFTreeView	Tree structures
WFMenuItemView	Menu items
WFAccordionItemView	Accordion items
WFTimelineItemView	Timeline items
WFListItemView	List items
WFCardItemView	Card items
WFTableItemView	Table items
WFGridItemView	Grid items
WFCollectionItemView	Collection items

Installation

Requirements

• Python 3.7 or higher
• No external dependencies (uses standard library only)

Setup

1. Clone or download this repository:

git clone <repository-url>
cd WifeFrame

2. Make the script executable (optional):

chmod +x uml_wireframe_parser.py

Usage

New DSL Parser (Recommended)

# Basic usage - DSL output
python wifeframe_dsl.py input.mdj

# DSL + Markdown documentation
python wifeframe_dsl.py input.mdj output.json --md

# Pretty-printed DSL
python wifeframe_dsl.py input.mdj output.json --md --pretty

Legacy Markdown Parser

# Basic usage
python uml_wireframe_parser.py input.mdj

# Specify output file
python uml_wireframe_parser.py input.mdj output.md

Command-Line Arguments (DSL Parser)

Argument	Description	Required
input.mdj	Path to the StarUML project file	Yes
output.json	Path for the output DSL file	No (defaults to input.compact.json)
--md	Also generate Markdown documentation	No
--pretty	Pretty-print DSL output	No

Output Format

DSL (New Parser)

{
  "project_name": "MyApp",
  "screens": [
    {
      "name": "Login Wireframe",
      "layout_direction": "vertical",
      "elements": [
        {
          "semantic_role": "email_input",
          "semantic_name": "email",
          "constraints": ["required"],
          "actions": []
        }
      ]
    }
  ]
}

Markdown Documentation

The generated Markdown file contains:

1. Document Header

• Title and diagram count
• Table of contents

2. Per-Diagram Sections

Overview

• Diagram name
• Parent module path
• Description
• Element count

UI Elements Table

ID	Semantic	Type	Label	Position	Constraints
email	email_input	WFInputView	your@email.com	(80, 265)	required

Semantic Groups

Elements grouped by semantic role (input, button, link, etc.)

Example

Real Output Sample

# StarUML Wireframe Documentation

This document contains **9** wireframe diagram(s) extracted from the StarUML project.

---

## 1. Login Wireframe

### 1. Overview
**Parent Module:** `Wireframe1`

**Element Count:** 14 widgets

### 2. UI Elements Table

| Element ID | Type | Label/Text | Position | Size | Notes |
| :--- | :--- | :--- | :--- | :--- | :--- |
| webframe_001 | Web Frame | Login Frame | (48, 24) | 592×576 |  |
| text_002 | Text | MyBusiness | (80, 30) | 200×40 |  |
| text_003 | Text | Welcome Back | (80, 90) | 200×35 |  |
| input_007 | Input | your@email.com | (80, 265) | 440×55 |  |
| checkbox_010 | Checkbox | Remember me | (80, 445) | 120×35 |  |
| button_012 | Button | Sign In | (80, 500) | 440×60 |  |

Troubleshooting

No wireframe diagrams found

Ensure your .mdj file contains wireframe diagrams. The tool supports:

• UMLWireframeDiagram (standard StarUML)
• WFWireframeDiagram (Wireframe plugin)

Invalid format error

Verify the .mdj file is valid:

python3 -m json.tool input.mdj

Large file handling

For very large projects, the parser may take some time. It processes all elements recursively to find wireframe diagrams.

Development

Project Structure

WifeFrame/
├── wifeframe_dsl.py           # 🆕 New DSL parser (recommended)
├── uml_wireframe_parser.py    # Legacy markdown parser
├── DSL_GUIDE.md               # DSL documentation
├── README.md                  # This file
├── Untitled.mdj               # Example StarUML file with wireframes
├── Untitled.compact.json      # Generated DSL output (compact)
└── Untitled.compact.md        # Generated documentation

Which Parser to Use?

Feature	wifeframe_dsl.py 🆕	uml_wireframe_parser.py
Output	DSL + Markdown	Markdown only
Semantic Analysis	✅ Yes (auto-inferred)	❌ No
AI Builder Ready	✅ Yes	❌ No
Constraint Extraction	✅ Yes	❌ No
Layout Analysis	✅ Yes	✅ Yes
Widget Support	60+	60+

Recommendation: Use wifeframe_dsl.py for new projects.

Key Classes

• StarUMLWireframeParser: Main parser class that extracts diagram information
• DiagramInfo: Data class for diagram metadata and widgets
• WidgetInfo: Data class for individual widget information
• MarkdownGenerator: Generates formatted Markdown output

License

This tool is provided as-is for parsing StarUML wireframe diagrams.

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

Version History

• v2.0.0 - 🆕 DSL Parser with semantic inference, constraint extraction, AI-ready output
• v1.1.0 - Added Wireframe plugin support (WF*View widgets), WFWireframeDiagram support
• v1.0.0 - Initial release with UMLWF widget support