PlantUML のための Tango アイコンテーマ

PlantUML はテキストコードでソフトウェア設計図を描くことができますが、とてもシンプルな図であるため、多くの設計者はアイコンと組み合わせることで、読者の直感的な理解を助けたいと考えるでしょう。 Snow Flower Text では Tango desktop Project のアイコンセットが組み込まれており簡単に PlantUML の図に使用できます。PlantUML のための Tango アイコンテーマは Snow Flower Text のみで使用可能な独自拡張です。

PlantUML の標準実装では小さなラスター画像のアイコンセットは組み込まれていますが、美しいベクトルアイコンセットは提供されていませんでした。 Tango アイコンセットは高品質で一貫したユーザエクスペリエンスの特徴があります。アイコンはベクトル形式の画像で、あらゆるサイズでジャギーのない見た目となります。このSnow Flower Text の拡張は PlantUML の高品質なベクトルデザインのアイコンセットの欠如を補完します。

Tango テーマのアイコンのうち Public Domain ライセンスで公開されているものから、特にソフトウェア設計で多く利用されるアイコンを厳選しました。

Tango Desktop Icon はデザインガイドによって一貫したユーザエクスペリエンスを提供する高品質なアイコンセットです。 v0.8.90(2009年) は Public Domain でリリースされました。従って、自由に制限なく利用可能です。

使い方

!theme tango-pd でテーマをロードします。これで tango_ で始まる関数が利用可能になります。

@startuml
!theme tango-pd

label "$tango_user()"

@enduml

定義済みの関数名とアイコンは「Tango アイコンセット」を参照してください。また、多くの「利用例」を紹介していますので、あなたの作図の参考にしてください。

Tango アイコンセット

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()

利用例

ユースケース図

@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

シーケンス図

@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

ネットワーク図

@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

配置図

@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

サイトマップ

@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

フォルダ構造

@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

参考

使い方