フルスタック開発教育支援ツール
npm install @k2works/full-stack-lab
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>App</title>
</head>
<body>
<h1>アプリケーション</h1>
<div id="app"></div>
<div id="app-dev"></div>
</body>
</html>
import render from "@k2works/full-stack-lab";
const contents = `
## 機能名
## 仕様
## TODOリスト
`;
const usecase = `
@startuml
left to right direction
actor "Actor" as ac
rectangle Application {
usecase "UseCase1" as UC1
usecase "UseCase2" as UC2
usecase "UseCase3" as UC3
}
ac --> UC1
ac --> UC2
ac --> UC3
@enduml
`;
const ui = `
@startsalt
{+
{* File | Edit | Source | Refactor
Refactor | New | Open File | - | Close | Close All }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt
`
const uml = `
@startuml
abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection
List <|-- AbstractList
Collection <|-- AbstractCollection
Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList
class ArrayList {
Object[] elementData
size()
}
enum TimeUnit {
DAYS
HOURS
MINUTES
}
annotation SuppressWarnings
@enduml
`;
const erd = `
@startuml
' hide the spot
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
entity "Entity01" as e01 {
*e1_id : number <<generated>>
--
*name : text
description : text
}
entity "Entity02" as e02 {
*e2_id : number <<generated>>
--
*e1_id : number <<FK>>
other_details : text
}
entity "Entity03" as e03 {
*e3_id : number <<generated>>
--
e1_id : number <<FK>>
other_details : text
}
e01 ||..o{ e02
e01 |o..o{ e03
@enduml
`;
render({ contents, ui, usecase, uml, erd });
npm install
npm start
MIT. Copyright (c) k2works.