Whizu

jQuery Mobile in Java

View project on GitHub
Whizu Download
jQuery Mobile widgets
Pages Accordions Buttons Collapsibles
Check out my latest project at www.whizu.me and stop typing passwords with Kee Password Manager. Just like that.

How to create good looking UML diagrams with yUML.me

Written by Rudy D'hauwe on August 11, 2013.

yUML is a free online service for creating and publishing simple UML diagrams. It's makes it really easy to embed nice looking UML diagrams in blogs, emails and wikis, or to post UML diagrams in forums and blog comments. It can also be used directly within your web based bug tracking tool. yUML additionally allows to copy and paste UML diagrams into MS Word documents and Powerpoint presentations.

Let's look at an example. The UML diagram below is on-the-fly generated with yUML.me by the following HTML markup on this page.

<img src='http//yuml.me/diagram/scruffy/class/
    [whizu-jquery-mobile{bg:green}]uses-.->[whizu-core],
    [whizu-core{bg:orange]-.->[slf4j-api-1.7.5],
    [whizu-core]-.->[commons-lang-2.6],
    [whizu-core]-.->[servlet-api-3.1]'/>

Here's the resulting UML diagram.

Here's another one.

<img src='//yuml.me/diagram/scruffy/class/
    [ButtonBuilder{bg:green}]build()-.->[Button{bg:orange}],
    [Builder<Button>{bg:white}]^-.-implements[ButtonBuilder]'/>



Let's make it a plain diagram.

<img src='//yuml.me/diagram/plain;dir:LR;/class/
    [ButtonBuilder{bg:green}]build()-.->[Button{bg:orange}],
    [Builder<Button>]^-.-implements[ButtonBuilder]'/>




And here's how to do yUML with Whizu ;-)

I really couldn't resist adding this API to Whizu…

import org.whizu.yuml.*;

Type builder = InterfaceBuilder.createWithName("Builder<Button>")
        .background(Color.white)
        .build();

Type button = InterfaceBuilder.createWithName("Button")
        .background(Color.orange)
        .build();

Type buttonBuilder = ClassBuilder.createWithName("ButtonBuilder")
        .implement(builder)
        .dependsOn(button)
        .addMethod("build()")
        .background(Color.green)
        .build();

ClassDiagram diagram = ClassDiagramBuilder.create()
        .addType(buttonBuilder)
        .addType(builder)
        .addType(button)
        .build();

Page page = ...; // the jQuery Mobile page

page.add(diagram);

A use case diagram with yUML in Java

Here's a simple use case diagram.

The yUML use case diagram is generated by the following Java code.

UseCase login = UseCaseBuilder.createWithName("Login")
    .build();

UseCase passwordReminder = UseCaseBuilder
    .createWithName("Request Password Reminder")
    .extend(login)
    .build();

UseCase register = UseCaseBuilder.createWithName("Register")
    .extend(login)
    .build();

UseCaseDiagram useCaseDiagram = UseCaseDiagramBuilder.create()
    .addUseCase(login)
    .addUseCase(passwordReminder)
    .addUseCase(register)
    .build();
Written by Rudy D'hauwe | Copyright © 2013-2014 | All rights reserved.