Tango Iconset Theme for PlantUML

PlantUML allows you to draw software blueprints in text code, though, Because the diagrams are so simple, many designers will want to combine them with icons to help the reader’s intuitive understanding, Snow Flower Text incorporates the Tango desktop Project’s icon set to make it easy to understand. Snow Flower Text has a built-in icon set from the Tango desktop Project that can easily be used with PlantUML diagrams. The Tango iconset theme for PlantUML is a proprietary extension available only in Snow Flower Text.

The standard implementation of PlantUML includes a small raster image icon set, the standard implementation of PlantUML incorporates a small raster image icon set, but does not provide a beautiful vector icon set. The Tango icon set is characterized by high quality and a consistent user experience. The icons are vector format images and have a jaggy-free appearance at all sizes. This extension of Snow Flower Text complements PlantUML’s lack of a high-quality vector design icon set.

From the Tango theme icons that are released under a Public Domain license, We have carefully selected icons that are used frequently, especially in software design.

Tango Desktop Icon is a set of high-quality icons that provide a consistent user experience through a design guide. v0.8.90 (2009) was released under Public Domain . Therefore, it is freely available without restriction.

How to use

Load the theme with !theme tango-pd. Now you can use functions starting with tango_.

@startuml
!theme tango-pd

label "$tango_user()"

@enduml

See “Tango Icon set” for predefined function names and icons. Many “Usage Examples” are also available for your reference.

Tango Icon set

Devices

$tango_computer()
$tango_monitor()
$tango_tablet()
$tango_smartphone()
$tango_keyboard()
$tango_mouse()
$tango_printer()
$tango_optical_disk_drive()
$tango_microphone()
$tango_audio()
$tango_wireless_network()

Media

$tango_media_optical()
$tango_media_flash()

Places

$tango_folder()
$tango_remote_folder()
$tango_server()
$tango_home()
$tango_cloud()

MIME

$tango_generic_file()
$tango_document()
$tango_document_properties()
$tango_spreadsheet()
$tango_presentation()
$tango_image()
$tango_archive()
$tango_font()

People

$tango_user()
$tango_users()

Applications

$tango_text_editor()
$tango_internet()
$tango_console()
$tango_mail()
$tango_mail_closed()
$tango_chat()

Emblems

$tango_padlock()
$tango_industrial_gear()

Usage Examples

Use Case Diagrams

@startuml
!theme tango-pd
left to right direction

label "$tango_users()\nUsers" as Users
label "$tango_user()\nAdmin" as Admin

Users -- (Search Docs)
Users -- (Download Doc)

Admin -- (Upload Docs)
Admin -- (Post new event)
Admin -- (Add User)

@enduml

Sequence Diagrams

@startuml

!theme tango-pd

<style>
participant {
	BackgroundColor: transparent
	LineColor: transparent
}
</style>

participant "$tango_smartphone()\nMobile device" as User
boundary "Web GUI" as GUI
control "Shopping Cart" as SC
entity Widget
database Widgets

User -> GUI : to boundary
GUI -> SC : to control
SC -> Widget : to entity
Widget -> Widgets : to database

@enduml

Network Diagrams

@startuml
!theme tango-pd

nwdiag {
 network dmz {
  address = "210.x.x.x/24";
   web01[ address = "210.x.x.1, 210.x.x.20", \
          description = "$tango_internet()\n web01"];
   web02[ address = "210.x.x.2",  \
    	  description = "$tango_internet()\n web02"];
 }
 network internal {
  address = "172.x.x.x/24";

  web01 [address = "172.x.x.1"];
  web02 [address = "172.x.x.2"];
  db    [address = "172.x.x.100",  description = "$tango_server()\n    db"];
  nfs  [address = "172.x.x.102",  description = "$tango_remote_folder()\n    nfs"];
  printer  [address = "172.x.x.103",  description = "$tango_printer()\n printer"];
 }
}
@enduml

Deployment Diagrams

@startuml
!theme tango-pd

label "$tango_internet()\nwww.yosbits.com\nYOS BOOKS" as Server
label "$tango_computer()\nDesktop" as Computer
label "$tango_tablet()\nTablet" as Tablet
label "$tango_smartphone()\nSmartphone" as Smartphone

Computer     -U- Server
Tablet       -U- Server
Smartphone   -U- Server

@enduml

Site Map

@startwbs

!theme tango-pd
skinparam defaultFontName "Helvetica Neue, Helvetica,Arial,sans-serif"

<style>
wbsDiagram {
  arrow {
     LineThickness 2
     LineColor #bbb
  }
  node {
    Margin 20
    FontSize 20pt
  }
}
</style>

*_ $tango_internet() \nhttp://www.yosbits.com
**_ $tango_document() \nApps
***_ App
**_ $tango_document() \nServices
***_ Service
**_ $tango_news() \nPress Release
***_ Release
***_ Roadmap
**_ $tango_mail() \nContacts
**_ $tango_document() \nTerms
***_ Privacy Policy
***_ Terms of Service
@endwbs

Folder Structure

@startwbs

!theme tango-pd
skinparam defaultFontName "Helvetica Neue, Helvetica,Arial,sans-serif"

<style>
wbsDiagram {
  arrow {
     LineThickness 2
     LineColor #ccc
  }
  node {
    Margin 20
    FontSize 40pt
  }
}
</style>

*_ $tango_folder() WebContent
**_ $tango_folder() META-INF
***_ $tango_generic_file() MANIFEST.MF
***_ $tango_generic_file() INDEX.LIST
**_ $tango_folder() WEB-INF
***_ $tango_folder() css
****_ $tango_generic_file() style.css
***_ $tango_folder() img
****_ $tango_image() favicon.png
***_ $tango_folder() js

***_ $tango_generic_file() index.html

@endwbs

References